/* ===================================================================== Velpoint — client portal sign-in (login.php) Fits in one viewport: no page scrolling on a normal screen. The trick is that every vertical measurement below is expressed in vh through a clamp(), so the whole layout shrinks with the window instead of overflowing it. Widths stay in px — only the height budget flexes. Motion is opt-out twice over: the OS "reduce motion" setting, and the toggle in the utility rail, which puts .vp-no-motion on . ===================================================================== */ :root { --lg-cream: #f6f1ec; --lg-cream-2:#fbf8f5; --lg-ink: #2A1514; --lg-muted: #7b6d6c; --lg-line: #e9e0da; --lg-red: #E33023; --lg-red-2: #f54f43; --lg-amber: #e97c33; --lg-white: #fff; --lg-col: 880px; /* hero / tiles column */ --lg-card: 560px; /* the form card stays narrower than the column */ --lg-form: 420px; /* the form itself, centred inside that card */ --sheet-bleed: clamp(16px, 7.5vh, 140px); /* empty panel below the form */ --lg-gap: clamp(8px, 1.7vh, 28px); } body.vp-login-body { background: var(--lg-cream); color: var(--lg-ink); overflow-x: hidden; } /* --------------------------------------------------------------- Shell: top bar pinned, everything else centred in what is left --------------------------------------------------------------- */ .vp-lg { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; /* mobile browsers: excludes the URL bar */ padding: clamp(10px, 1.8vh, 34px) 0 0; isolation: isolate; overflow: hidden; /* the sheet's bleed is clipped, never scrolled */ } .vp-lg__mid { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; } .vp-lg__col { width: 100%; max-width: var(--lg-col); margin: 0 auto; } .vp-lg__col > *:last-child { margin-bottom: 0; } /* With the recent-logins row present the upper half carries an extra block, so its rhythm runs tighter and the sheet gives back some of its empty base. The walkthrough prompt is onboarding for someone who has never been inside, so it only shows when there are no saved accounts. */ .vp-lg:not(.vp-lg--solo) { --lg-gap: clamp(7px, 1.35vh, 22px); --sheet-bleed: clamp(12px, 1.6vh, 90px); } .vp-lg:not(.vp-lg--solo) .vp-lg__tourwrap { display: none; } .vp-lg:not(.vp-lg--solo) .vp-lg__title { font-size: clamp(28px, min(6.9vh, 10.4vw), 100px); } .vp-lg:not(.vp-lg--solo) .vp-lg__acct, .vp-lg:not(.vp-lg--solo) .vp-lg__add { width: clamp(88px, 11vh, 148px); height: clamp(88px, 11vh, 148px); } /* moving backdrop */ .vp-lg__bg { position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; } .vp-lg__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .38; } .vp-lg__blob--1 { width: 620px; height: 620px; top: -260px; right: -180px; background: radial-gradient(circle at 30% 30%, var(--lg-red), transparent 70%); animation: lg-drift-a 19s ease-in-out infinite alternate; } .vp-lg__blob--2 { width: 520px; height: 520px; bottom: -220px; left: -180px; background: radial-gradient(circle at 60% 40%, var(--lg-amber), transparent 70%); opacity: .3; animation: lg-drift-b 23s ease-in-out infinite alternate; } .vp-lg__blob--3 { width: 420px; height: 420px; top: 42%; left: 48%; background: radial-gradient(circle at 50% 50%, #f9a03f, transparent 70%); opacity: .18; animation: lg-drift-c 27s ease-in-out infinite alternate; } @keyframes lg-drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-70px,60px,0) scale(1.12); } } @keyframes lg-drift-b { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px,-50px,0) scale(1.08); } } @keyframes lg-drift-c { from { transform: translate3d(-30px,0,0) scale(.9); } to { transform: translate3d(40px,-40px,0) scale(1.15); } } /* faint film grain so the big flat cream area is not dead */ /* Drawn behind the sheet, so the glass blurs it — a slow drifting mesh that reads as a network graph rather than generic confetti. */ .vp-lg__particles { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; } .vp-lg__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------- Entrance choreography — elements carry .lg-in and a --d delay --------------------------------------------------------------- */ .lg-in { opacity: 0; animation: lg-rise .8s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); } @keyframes lg-rise { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } } /* For elements that carry a transform of their own (the rail is centred with translateY(-50%)): fade only, or lg-rise's closing `transform: none` would wipe that positioning out. */ .lg-fade { opacity: 0; animation: lg-fade-in .8s ease forwards; animation-delay: var(--d, 0s); } @keyframes lg-fade-in { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------------------------------------- Top bar --------------------------------------------------------------- */ /* Fades rather than rises: a transform animation here — even one ending on `transform: none` — makes this element the containing block for the position:fixed rail nested inside it, and the rail stops centring. */ .vp-lg__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } .vp-lg__logo img { height: clamp(26px, 4vh, 48px); width: auto; } .vp-lg__top-right { display: flex; align-items: center; gap: 10px; } .vp-lg__toplink { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(12px, 1.6vh, 16px); font-weight: 600; color: var(--lg-ink); padding: clamp(7px, 1.2vh, 14px) clamp(13px, 1.8vw, 22px); border-radius: 50px; background: rgba(255,255,255,.65); border: 1px solid var(--lg-line); backdrop-filter: blur(6px); transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, color .3s ease; } .vp-lg__toplink:hover { color: var(--lg-red); box-shadow: 0 10px 24px rgba(42,21,20,.09); transform: translateY(-2px); } .vp-lg__toplink i { transition: transform .3s ease; } .vp-lg__toplink--back:hover i { transform: translateX(-3px); } /* --------------------------------------------------------------- Hero --------------------------------------------------------------- */ .vp-lg__hero { text-align: center; margin-bottom: var(--lg-gap); } .vp-lg__title { font-size: clamp(30px, min(7.4vh, 11vw), 108px); line-height: .98; letter-spacing: -.03em; margin: 0 0 clamp(3px, .7vh, 16px); color: var(--lg-ink); } /* each word arrives on its own, then the accent word catches a slow sheen */ .vp-lg__word { display: inline-block; opacity: 0; animation: lg-word .95s cubic-bezier(.2,.8,.25,1) forwards; animation-delay: var(--d, 0s); } @keyframes lg-word { from { opacity: 0; transform: translateY(46px) rotate(4deg); } to { opacity: 1; transform: none; } } .vp-lg__word--accent { background: linear-gradient(100deg, var(--lg-red) 0%, var(--lg-amber) 38%, var(--lg-red-2) 62%, var(--lg-red) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lg-word .95s cubic-bezier(.2,.8,.25,1) forwards, lg-sheen 7s linear 1.3s infinite; } @keyframes lg-sheen { from { background-position: 0% 50%; } to { background-position: 260% 50%; } } .vp-lg__sub { font-size: clamp(12px, 1.8vh, 22px); color: var(--lg-muted); margin: 0; } /* --------------------------------------------------------------- Utility rail (motion + sound) --------------------------------------------------------------- */ .vp-lg__rail { position: fixed; top: 50%; right: clamp(10px, 1.6vw, 26px); transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; padding: 7px; gap: 3px; background: rgba(255,255,255,.82); border: 1px solid var(--lg-line); border-radius: 17px; box-shadow: 0 18px 40px rgba(42,21,20,.1); backdrop-filter: blur(10px); } .vp-lg__rail-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--lg-ink); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.7,.3,1); } .vp-lg__rail-btn:hover { background: #fdeeec; color: var(--lg-red); transform: scale(1.08); } .vp-lg__rail-btn[aria-pressed="true"] { background: linear-gradient(135deg, var(--lg-red), var(--lg-red-2)); color: #fff; } .vp-lg__rail-sep { height: 1px; background: var(--lg-line); margin: 2px 6px; } .vp-lg__rail-btn .off-slash { display: none; } .vp-lg__rail-btn[aria-pressed="false"] .off-slash { display: inline; } .vp-lg__rail-btn[aria-pressed="false"] .on-icon { display: none; } /* --------------------------------------------------------------- Walkthrough pill, under the hero --------------------------------------------------------------- */ .vp-lg__tour { display: inline-flex; align-items: center; gap: 12px; margin: 0 auto var(--lg-gap); padding: 6px 20px 6px 6px; border-radius: 50px; border: 1px solid var(--lg-line); background: rgba(255,255,255,.7); cursor: pointer; text-align: left; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; } .vp-lg__tour:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(42,21,20,.1); border-color: #f3d3c2; } .vp-lg__tour-play { position: relative; flex: 0 0 auto; width: clamp(30px, 4.2vh, 54px); height: clamp(30px, 4.2vh, 54px); border-radius: 13px; background: linear-gradient(145deg, #f4a02c, var(--lg-amber)); color: #fff; font-size: clamp(12px, 1.7vh, 19px); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(233,124,51,.36); } /* slow pulse so the eye finds it */ .vp-lg__tour-play::before, .vp-lg__tour-play::after { content: ""; position: absolute; inset: 0; border-radius: 13px; border: 2px solid rgba(233,124,51,.5); animation: lg-ping 2.8s cubic-bezier(.2,.6,.3,1) infinite; } .vp-lg__tour-play::after { animation-delay: 1.4s; } @keyframes lg-ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.5); opacity: 0; } } .vp-lg__tour-text { font-size: clamp(12px, 1.75vh, 19px); font-weight: 600; color: var(--lg-ink); } .vp-lg__tour:hover .vp-lg__tour-text { color: var(--lg-red); } /* --------------------------------------------------------------- Recent logins --------------------------------------------------------------- */ .vp-lg__recent { margin-bottom: var(--lg-gap); } .vp-lg__recent-head { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-bottom: clamp(7px, 1.15vh, 16px); } .vp-lg__recent-head h2 { font-size: clamp(15px, 2.2vh, 26px); margin: 0; color: var(--lg-ink); } .vp-lg__clear { font-size: clamp(11px, 1.5vh, 16px); font-weight: 600; color: var(--lg-muted); border: 0; background: none; cursor: pointer; padding: 0; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; } .vp-lg__clear:hover { color: var(--lg-red); border-color: var(--lg-red); } .vp-lg__accounts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(9px, 1.4vh, 19px); } .vp-lg__acct, .vp-lg__add { width: clamp(92px, 11.6vh, 158px); height: clamp(92px, 11.6vh, 158px); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1vh, 14px); padding: 10px; cursor: pointer; } .vp-lg__acct { position: relative; border: 1px solid var(--lg-line); background: var(--lg-white); text-align: center; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; } .vp-lg__acct::after { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(140deg, rgba(227,48,35,.09), transparent 55%); opacity: 0; transition: opacity .35s ease; } .vp-lg__acct:hover { transform: translateY(-6px); border-color: #f6cfc9; box-shadow: 0 20px 38px rgba(42,21,20,.13); } .vp-lg__acct:hover::after { opacity: 1; } .vp-lg__acct:focus-visible { outline: 3px solid rgba(227,48,35,.4); outline-offset: 3px; } /* avatar: initials on a per-account hue, ring spins up on hover */ .vp-lg__avatar { position: relative; width: clamp(34px, 4.8vh, 62px); height: clamp(34px, 4.8vh, 62px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: clamp(13px, 2vh, 25px); font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--av-a, #E33023), var(--av-b, #e97c33)); box-shadow: 0 8px 18px rgba(42,21,20,.16); transition: transform .4s cubic-bezier(.2,.7,.3,1); } .vp-lg__acct:hover .vp-lg__avatar { transform: scale(1.08); } .vp-lg__avatar::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, var(--lg-red), var(--lg-amber), var(--lg-red-2), var(--lg-red)); opacity: 0; z-index: -1; transition: opacity .35s ease; animation: lg-spin 4s linear infinite; } .vp-lg__acct:hover .vp-lg__avatar::before { opacity: 1; } @keyframes lg-spin { to { transform: rotate(360deg); } } .vp-lg__acct-name { font-weight: 600; font-size: clamp(11px, 1.6vh, 18px); color: var(--lg-ink); line-height: 1.3; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vp-lg__acct-x { position: absolute; top: 7px; left: 7px; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; font-size: 9px; background: #fdeeec; color: var(--lg-red); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.7); transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease; } .vp-lg__acct:hover .vp-lg__acct-x, .vp-lg__acct-x:focus-visible { opacity: 1; transform: none; } .vp-lg__acct-x:hover { background: var(--lg-red); color: #fff; transform: rotate(90deg); } .vp-lg__acct.is-going { animation: lg-pop-out .38s cubic-bezier(.4,0,.6,1) forwards; } @keyframes lg-pop-out { to { opacity: 0; transform: scale(.82) translateY(10px); } } /* "Add account" tile */ .vp-lg__add { border: 0; color: #fff; background: linear-gradient(150deg, var(--lg-red-2), var(--lg-red)); box-shadow: 0 14px 30px rgba(227,48,35,.3); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; } .vp-lg__add:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(227,48,35,.4); } .vp-lg__add-plus { width: clamp(32px, 4.4vh, 56px); height: clamp(32px, 4.4vh, 56px); border-radius: 50%; background: rgba(255,255,255,.24); display: flex; align-items: center; justify-content: center; font-size: clamp(13px, 1.9vh, 23px); transition: transform .45s cubic-bezier(.2,.7,.3,1), background .3s ease; } .vp-lg__add:hover .vp-lg__add-plus { transform: rotate(180deg) scale(1.1); background: rgba(255,255,255,.34); } .vp-lg__add-label { font-weight: 700; font-size: clamp(10px, 1.35vh, 17px); white-space: nowrap; } /* --------------------------------------------------------------- "or" divider --------------------------------------------------------------- */ .vp-lg__or { display: flex; align-items: center; gap: 18px; margin: 0 auto clamp(10px, 1.8vh, 24px); max-width: var(--lg-card); } .vp-lg__or span { font-size: clamp(16px, 2.6vh, 32px); font-weight: 600; color: var(--lg-ink); } .vp-lg__or::before, .vp-lg__or::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--lg-line) 18%, var(--lg-line) 82%, transparent); } /* The sheet fades in on its own and lets its contents arrive in sequence, rather than sliding in as one block with .lg-in. Two reasons: the form is the point of the page, so its fields reading in one after another beats a single slab moving; and .lg-in ends on `transform: none`, which would make the sheet a containing block for anything positioned fixed inside it — the same trap that stopped the utility rail centring. */ /* --------------------------------------------------------------- Form sheet Anchored to the bottom of the frame with only its top corners rounded, and carrying far more bottom padding than it needs. That surplus runs past the bottom edge and is clipped by .vp-lg, so the panel reads as rising off the screen with nothing to scroll. --------------------------------------------------------------- */ .vp-lg__sheet { position: relative; width: 100%; max-width: var(--lg-card); margin: 0 auto; padding: clamp(13px, 1.85vh, 26px) clamp(18px, 2.6vw, 40px) var(--sheet-bleed); border: 1px solid rgba(255,255,255,.92); border-bottom: 0; border-radius: clamp(20px, 2.9vh, 34px) clamp(20px, 2.9vh, 34px) 0 0; background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.6) 60%, rgba(255,255,255,.5) 100%); backdrop-filter: blur(26px) saturate(150%); box-shadow: 0 -22px 60px rgba(42,21,20,.11), inset 0 1px 0 rgba(255,255,255,.95); overflow: hidden; } /* thin scan line travelling across the top edge */ .vp-lg__sheet::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 34%; background: linear-gradient(90deg, transparent, var(--lg-red), var(--lg-amber), transparent); animation: lg-scan 5.5s ease-in-out infinite; } @keyframes lg-scan { 0% { transform: translateX(-100%); } 50% { transform: translateX(300%); } 100% { transform: translateX(-100%); } } .vp-lg__sheet-inner { width: 100%; max-width: var(--lg-form); margin: 0 auto; } .lg-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto clamp(7px, 1.2vh, 15px); padding: clamp(4px, .6vh, 7px) clamp(11px, 1.3vw, 15px); border-radius: 50px; border: 1px solid #f3ded8; background: linear-gradient(135deg, #fdeeec, #fff6f0); color: var(--lg-red); font-size: clamp(10px, 1.3vh, 12px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .lg-badge i { font-size: 12px; } .vp-lg__sheet-head { display: flex; justify-content: center; } /* ---------- fields ---------- */ .lg-field { position: relative; margin-bottom: clamp(6px, .9vh, 11px); } .lg-field input { width: 100%; height: clamp(42px, 4.9vh, 56px); padding: clamp(13px, 1.8vh, 21px) 48px clamp(3px, .55vh, 8px) 48px; border: 1px solid #ece2db; border-radius: clamp(12px, 1.6vh, 16px); background: #fff; color: var(--lg-ink); font-size: clamp(13.5px, 1.65vh, 15px); box-shadow: 0 1px 2px rgba(42,21,20,.04); transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; } .lg-field input:hover { border-color: #e0d2ca; } .lg-field input:focus { outline: none; border-color: var(--lg-red); box-shadow: 0 0 0 4px rgba(227,48,35,.12), 0 6px 18px rgba(42,21,20,.06); } .lg-field__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: clamp(13px, 1.6vh, 15px); color: #c2b4b1; pointer-events: none; transition: color .3s ease; } .lg-field:focus-within .lg-field__icon { color: var(--lg-red); } .lg-field label { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); font-size: clamp(12.5px, 1.65vh, 15px); color: var(--lg-muted); pointer-events: none; transform-origin: left center; transition: transform .25s cubic-bezier(.2,.7,.3,1), color .25s ease; } .lg-field input:focus + .lg-field__icon + label, .lg-field input:not(:placeholder-shown) + .lg-field__icon + label { transform: translateY(calc(-50% - clamp(8px, 1.05vh, 13px))) scale(.74); color: var(--lg-red); } .lg-field__btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: #b3a5a4; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .25s ease, background .25s ease; } .lg-field__btn:hover { color: var(--lg-red); background: #fdeeec; } /* caps lock warning — absolutely placed so it cannot change the sheet's height and push the form past the bottom of the frame */ .lg-caps { display: none; align-items: center; gap: 6px; position: absolute; right: 48px; top: 50%; transform: translateY(-50%); margin: 0; font-size: 11px; font-weight: 600; color: var(--lg-amber); background: #fff7ef; border: 1px solid #f6dfc4; border-radius: 50px; padding: 3px 10px; } .lg-caps.is-on { display: flex; animation: lg-rise .3s ease forwards; } .vp-lg__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: clamp(6px, 1.05vh, 14px) 0 clamp(8px, 1.2vh, 16px); } /* custom checkbox with a drawn tick */ .lg-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: clamp(11.5px, 1.6vh, 14px); color: var(--lg-ink); margin: 0; } .lg-check input { position: absolute; opacity: 0; width: 0; height: 0; } .lg-check__box { width: 21px; height: 21px; flex: 0 0 21px; border: 2px solid #e3d8d2; border-radius: 7px; background: #fff; position: relative; transition: background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.7,.3,1); } .lg-check__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.2,1.5,.4,1) .05s; } .lg-check input:checked + .lg-check__box { background: linear-gradient(140deg, var(--lg-red), var(--lg-red-2)); border-color: var(--lg-red); } .lg-check input:checked + .lg-check__box::after { transform: rotate(45deg) scale(1); } .lg-check input:focus-visible + .lg-check__box { box-shadow: 0 0 0 4px rgba(227,48,35,.2); } .lg-check:hover .lg-check__box { transform: scale(1.06); } .vp-lg__forgot { font-weight: 700; font-size: clamp(11.5px, 1.6vh, 14px); color: var(--lg-ink); text-decoration: underline; text-underline-offset: 4px; } .vp-lg__forgot:hover { color: var(--lg-red); } /* ---------- buttons ---------- */ .lg-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: clamp(40px, 4.7vh, 52px); border: 0; border-radius: clamp(12px, 1.6vh, 16px); font-size: clamp(13px, 1.7vh, 16px); font-weight: 700; cursor: pointer; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, filter .3s ease; } .lg-btn + .lg-btn { margin-top: clamp(6px, .85vh, 10px); } .lg-btn:active { transform: scale(.985); } /* light sweeps across on hover */ .lg-btn::before { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); transition: left .55s cubic-bezier(.3,.7,.3,1); } .lg-btn:hover::before { left: 115%; } .lg-btn--primary { background: linear-gradient(160deg, #3b201e, var(--lg-ink) 55%, #1d0f0e); color: #fff; box-shadow: 0 14px 30px rgba(42,21,20,.26), inset 0 1px 0 rgba(255,255,255,.14); } .lg-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(42,21,20,.32), inset 0 1px 0 rgba(255,255,255,.18); } .lg-btn--accent { background: linear-gradient(100deg, var(--lg-red), var(--lg-red-2)); color: #fff; box-shadow: 0 14px 30px rgba(227,48,35,.3), inset 0 1px 0 rgba(255,255,255,.22); } .lg-btn--accent:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(227,48,35,.38), inset 0 1px 0 rgba(255,255,255,.26); } .lg-btn i, .lg-btn svg { transition: transform .3s ease; } .lg-btn:hover i, .lg-btn:hover svg { transform: translateX(4px); } /* submitting state: label swaps for a spinner, button locks */ .lg-btn.is-busy { pointer-events: none; filter: saturate(.75); } .lg-btn.is-busy .lg-btn__label { opacity: 0; } .lg-btn__spin { position: absolute; width: 21px; height: 21px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; } .lg-btn.is-busy .lg-btn__spin { opacity: 1; animation: lg-spin .7s linear infinite; } /* ripple dot planted by JS at the click point */ .lg-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); pointer-events: none; animation: lg-ripple .6s ease-out forwards; } @keyframes lg-ripple { to { transform: scale(2.6); opacity: 0; } } /* ---------- social sign-in ---------- */ .lg-sso { margin-top: clamp(8px, 1.2vh, 15px); } .lg-sso__label { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(5px, .8vh, 9px); color: var(--lg-muted); font-size: clamp(10.5px, 1.3vh, 12.5px); } .lg-sso__label::before, .lg-sso__label::after { content: ""; height: 1px; flex: 1; background: rgba(42,21,20,.1); } .lg-sso__row { display: flex; gap: clamp(8px, 1.1vw, 12px); } .lg-sso__btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; height: clamp(36px, 4.1vh, 46px); padding: 0 8px; border: 1px solid #ece2db; border-radius: clamp(11px, 1.5vh, 15px); background: #fff; color: var(--lg-ink); font-size: clamp(11.5px, 1.4vh, 13.5px); font-weight: 600; box-shadow: 0 1px 2px rgba(42,21,20,.04); transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; } .lg-sso__btn:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 14px 28px rgba(42,21,20,.14); color: var(--lg-ink); } .lg-sso__btn svg { width: clamp(16px, 1.9vh, 18px); height: clamp(16px, 1.9vh, 18px); flex: 0 0 auto; } .lg-sso__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vp-lg__foot { margin: clamp(8px, 1.15vh, 16px) 0 0; padding-top: clamp(7px, 1vh, 13px); border-top: 1px solid rgba(42,21,20,.08); text-align: center; font-size: clamp(10.5px, 1.3vh, 12.5px); color: var(--lg-muted); line-height: 1.6; } .vp-lg__foot a { color: var(--lg-red); font-weight: 600; } .vp-lg__foot a:hover { text-decoration: underline; } /* --------------------------------------------------------------- Toasts — messages drop in from the top of the window. They are fixed and outside .vp-lg, so showing one never changes the height of anything the form sits on. --------------------------------------------------------------- */ .vp-toasts { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 120; width: min(470px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; padding-top: 16px; pointer-events: none; } .vp-toast { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 42px 11px 14px; border-radius: 16px; background: rgba(255,255,255,.86); backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(42,21,20,.18); overflow: hidden; pointer-events: auto; animation: vp-toast-in .55s cubic-bezier(.2,.9,.3,1.15) both; animation-delay: calc(var(--i, 0) * .09s); } @keyframes vp-toast-in { from { opacity: 0; transform: translateY(-130%) scale(.94); } to { opacity: 1; transform: none; } } .vp-toast.is-going { animation: vp-toast-out .35s cubic-bezier(.4,0,.7,.2) forwards; } @keyframes vp-toast-out { to { opacity: 0; transform: translateY(-130%) scale(.94); margin-top: -70px; } } /* colour is carried by a left edge rather than a full wash, so the text stays high-contrast whatever the message */ .vp-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .vp-toast--error::before { background: linear-gradient(180deg, var(--lg-red), var(--lg-red-2)); } .vp-toast--ok::before { background: linear-gradient(180deg, #1f8c58, #46b37f); } .vp-toast__icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; } .vp-toast--error .vp-toast__icon { background: #fdeeec; color: var(--lg-red); } .vp-toast--ok .vp-toast__icon { background: #eaf6ef; color: #1f8c58; } .vp-toast__text { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--lg-ink); } .vp-toast__x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: #a99b99; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease, transform .25s ease; } .vp-toast__x:hover { background: #f3e9e4; color: var(--lg-ink); transform: rotate(90deg); } /* the bar is the timer: when it finishes, the toast leaves. Hovering pauses the animation, which pauses the dismissal with it. */ .vp-toast__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left center; animation: vp-toast-bar var(--life, 8s) linear forwards; animation-delay: calc(var(--i, 0) * .09s); } .vp-toast--error .vp-toast__bar { background: linear-gradient(90deg, var(--lg-red), var(--lg-amber)); } .vp-toast--ok .vp-toast__bar { background: linear-gradient(90deg, #1f8c58, #46b37f); } @keyframes vp-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } } .vp-toast:hover .vp-toast__bar { animation-play-state: paused; } @media (max-width: 575px) { .vp-toasts { width: calc(100vw - 20px); padding-top: 10px; } .vp-toast__text { font-size: 13px; } } /* --------------------------------------------------------------- Alerts --------------------------------------------------------------- */ .lg-alert { display: flex; align-items: flex-start; gap: 11px; padding: clamp(8px, 1.2vh, 12px) 16px; border-radius: 11px; margin-bottom: clamp(8px, 1.3vh, 14px); font-size: clamp(11.5px, 1.55vh, 13.5px); line-height: 1.5; } .lg-alert i { font-size: 15px; margin-top: 2px; } .lg-alert--error { background: #fdeeec; border: 1px solid #f7d3ce; color: #a3241a; } .lg-alert--error i { color: var(--lg-red); } .lg-alert--ok { background: #eef8f2; border: 1px solid #cde8da; color: #1c6b45; } .lg-alert--ok i { color: #1f8c58; } /* An alert carries .lg-in for its entrance, and the shake is a second animation on the same element. Declaring the two separately means the `animation` shorthand of whichever rule comes last wins outright — which silently left the error stuck at .lg-in's opacity: 0, invisible. They have to be declared together, in one shorthand, at a specificity that beats both. Order matters: lg-shake is listed second so it owns `transform` while it runs, and lg-rise's fill owns opacity throughout. */ .lg-alert.lg-in { animation: lg-rise .55s cubic-bezier(.2,.7,.3,1) var(--d, 0s) forwards; } .lg-alert--error.lg-in { animation: lg-rise .5s cubic-bezier(.2,.7,.3,1) var(--d, 0s) forwards, lg-shake .5s cubic-bezier(.36,.07,.19,.97) calc(var(--d, 0s) + .12s); } @keyframes lg-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } /* An alert is on screen: recover its height from the surrounding rhythm so the page still ends at exactly one viewport. */ /* --------------------------------------------------------------- Walkthrough modal --------------------------------------------------------------- */ .lg-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 24px; } .lg-modal.is-open { display: flex; } .lg-modal__veil { position: absolute; inset: 0; background: rgba(24,12,11,.62); backdrop-filter: blur(4px); animation: lg-fade .3s ease forwards; } @keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } } .lg-modal__box { position: relative; width: min(560px, 100%); background: var(--lg-cream-2); border-radius: 24px; padding: 36px; box-shadow: 0 40px 90px rgba(24,12,11,.5); animation: lg-zoom .42s cubic-bezier(.2,.9,.3,1.1) forwards; max-height: 88vh; overflow-y: auto; } @keyframes lg-zoom { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } } .lg-modal__box h3 { font-size: 24px; margin: 0 0 6px; color: var(--lg-ink); } .lg-modal__box > p { color: var(--lg-muted); margin: 0 0 20px; font-size: 14px; } .lg-modal__x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1e8e2; color: var(--lg-ink); cursor: pointer; transition: background .25s ease, transform .25s ease; } .lg-modal__x:hover { background: var(--lg-red); color: #fff; transform: rotate(90deg); } .lg-steps { list-style: none; padding: 0; margin: 0 0 22px; counter-reset: s; } .lg-steps li { position: relative; padding: 12px 0 12px 52px; border-bottom: 1px solid var(--lg-line); color: var(--lg-ink); font-size: 14px; } .lg-steps li:last-child { border-bottom: 0; } .lg-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 11px; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(140deg, var(--lg-red), var(--lg-amber)); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .lg-steps li b { display: block; margin-bottom: 2px; } .lg-steps li span { color: var(--lg-muted); font-size: 13px; } /* --------------------------------------------------------------- Narrow screens The rail moves out of the content's way; the column keeps its height budget, so the page still fits without scrolling. --------------------------------------------------------------- */ @media (max-width: 1199px) { :root { --lg-col: 640px; } } @media (max-width: 991px) { :root { --lg-col: 440px; --lg-card: 440px; --lg-form: 370px; } .vp-lg__rail { top: auto; bottom: 14px; right: 14px; transform: none; flex-direction: row; padding: 5px; opacity: .94; } .vp-lg__rail-btn { width: 36px; height: 36px; border-radius: 10px; font-size: 14px; } .vp-lg__rail-sep { width: 1px; height: auto; margin: 5px 3px; } } @media (max-width: 575px) { :root { --lg-col: 100%; --lg-card: 100%; --lg-form: 100%; --lg-gap: clamp(6px, 1.3vh, 13px); } .vp-lg { padding-left: 4px; padding-right: 4px; } :root { --sheet-bleed: clamp(16px, 6.5vh, 90px); } /* a phone with saved accounts is the tightest layout of all — the sheet gives back most of its empty base so the headline clears the top bar */ .vp-lg:not(.vp-lg--solo) { --sheet-bleed: clamp(10px, 1.2vh, 60px); --lg-gap: clamp(5px, .9vh, 12px); } /* the tiles sit directly on the sheet's edge here, which separates them well enough without the word */ .vp-lg:not(.vp-lg--solo) .vp-lg__or { display: none; } /* provider names do not fit three-across on a phone — icons carry it, and each button keeps its aria-label for screen readers */ .lg-sso__btn span { display: none; } .lg-sso__btn { gap: 0; } .lg-sso__btn svg { width: 22px; height: 22px; } .vp-lg__sheet { border-radius: 26px 26px 0 0; } .vp-lg__toplink span { display: none; } /* icon-only pills */ .vp-lg__toplink { padding: 9px 12px; } /* the rail stops floating and joins the top bar, so it can never sit on top of the form or the support number */ .vp-lg__rail { position: static; transform: none; flex-direction: row; padding: 3px; gap: 2px; border-radius: 50px; box-shadow: none; background: rgba(255,255,255,.65); } .vp-lg__rail-btn { width: 32px; height: 32px; border-radius: 50%; font-size: 13px; } .vp-lg__rail-sep { width: 1px; height: 18px; align-self: center; margin: 0 1px; } .vp-lg__top-right { gap: 7px; } .vp-lg__tour { padding: 5px 15px 5px 5px; gap: 9px; } .vp-lg__tour-text { font-size: 12.5px; } .vp-lg__acct, .vp-lg__add { width: clamp(86px, 25vw, 106px); height: clamp(86px, 25vw, 106px); } .lg-field input { font-size: 16px; } /* stops iOS zooming on focus */ .lg-caps { right: 48px; font-size: 10px; } .vp-lg__row { margin: 9px 0 11px; } .vp-lg__foot { line-height: 1.55; } .lg-modal__box { padding: 28px 20px; } } /* very short windows: let it scroll rather than clip anything away */ /* Laptop-height windows with a recent-logins row are the tightest case in the whole layout — trim the headline so it always clears the top bar. */ @media (max-height: 830px) { .vp-lg:not(.vp-lg--solo) .vp-lg__title { font-size: clamp(26px, min(6.1vh, 9.6vw), 90px); } .vp-lg:not(.vp-lg--solo) .vp-lg__sub { font-size: clamp(11px, 1.65vh, 15px); } /* the sheet's own edge already separates the saved accounts from the form, so the word can go when the height is this tight */ .vp-lg:not(.vp-lg--solo) .vp-lg__or { display: none; } .vp-lg:not(.vp-lg--solo) .lg-sso__btn { height: clamp(34px, 3.9vh, 44px); } } /* Too short to hold the form: stop clipping and allow the page to scroll, rather than hiding controls below the fold where nobody can reach them. */ @media (max-height: 600px) { .vp-lg { height: auto; min-height: 100vh; overflow: visible; padding-top: 20px; } :root { --sheet-bleed: 0px; } .vp-lg__sheet { padding-bottom: 34px; margin-bottom: 0; border-radius: 24px; } body.vp-login-body { overflow-y: auto; } } /* --------------------------------------------------------------- Motion opt-out — the OS setting and the rail toggle both land here --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .vp-lg *, .vp-lg *::before, .vp-lg *::after, .vp-toast, .vp-toast *, .vp-toast::before, .lg-modal *, .lg-modal *::before, .lg-modal *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } .lg-in, .lg-fade, .vp-lg__word { opacity: 1 !important; } .lg-in, .vp-lg__word { transform: none !important; } } body.vp-no-motion .vp-toast, body.vp-no-motion .vp-toast *, body.vp-no-motion .vp-lg *, body.vp-no-motion .vp-lg *::before, body.vp-no-motion .vp-lg *::after, body.vp-no-motion .lg-modal *, body.vp-no-motion .lg-modal *::before, body.vp-no-motion .lg-modal *::after { animation: none !important; transition-duration: .001s !important; } body.vp-no-motion .lg-in, body.vp-no-motion .lg-fade, body.vp-no-motion .vp-lg__word { opacity: 1 !important; } body.vp-no-motion .lg-in, body.vp-no-motion .vp-lg__word { transform: none !important; } body.vp-no-motion .vp-lg__particles, body.vp-no-motion .vp-lg__blob, body.vp-no-motion .vp-lg__sheet::before, body.vp-no-motion .vp-lg__tour-play::before, body.vp-no-motion .vp-lg__tour-play::after { display: none; }