/* ========================================================================== INSITE — Linkage partner registration (linkage_register.php) Page-scoped stylesheet. Every rule sits under `.lr` (the class) so it (a) never leaks into other pages and (b) outranks the Tailwind CDN preflight, which is injected *after* this file and uses (0,1,0) selectors such as [type='button']. Tokens mirror login.php (--ft-*) so the two public pages read as one product: INSITE indigo, navy dark surfaces, Inter. Motion: transform/opacity only, 120–280ms, one ease-out curve. Everything collapses to its final state under prefers-reduced-motion. ========================================================================== */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { color-scheme: light; --lr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --lr-ease: cubic-bezier(0.2, 0, 0, 1); --lr-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lr-ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1); --lr-t1: 120ms; --lr-t2: 200ms; --lr-t3: 280ms; --lr-page: #f3f4fa; --lr-glow-a: rgba(63, 81, 181, 0.12); --lr-glow-b: rgba(56, 152, 236, 0.10); --lr-card: #ffffff; --lr-card-edge: rgba(21, 26, 51, 0.06); --lr-inset: #f7f8fc; --lr-ink: #151a33; --lr-muted: #525a78; --lr-faint: #7c84a3; --lr-placeholder: #737a96; --lr-field: #f6f7fb; --lr-field-hover: #f0f2f9; --lr-field-focus: #ffffff; --lr-border: #dde1ec; --lr-border-strong: #c4cadf; --lr-divider: #eceef5; --lr-tint: #eef1fd; --lr-tint-border: #cbd3f4; --lr-link: #3342a8; --lr-link-hover: #1a237e; --lr-focus: #3f51b5; --lr-ring: rgba(63, 81, 181, 0.22); --lr-primary: #283593; --lr-primary-top: #3949ab; --lr-primary-ink: #ffffff; --lr-primary-shadow: rgba(40, 53, 147, 0.38); --lr-danger: #b42318; --lr-danger-field: #d4483b; --lr-danger-ring: rgba(212, 72, 59, 0.18); --lr-danger-bg: #fef3f2; --lr-danger-border: #f7cfca; --lr-danger-ink: #7a1c14; --lr-warning: #b54708; --lr-warning-bg: #fffaeb; --lr-warning-border: #f8dca4; --lr-success: #1d7a3e; --lr-success-strong: #16a34a; --lr-success-bg: #effaf2; --lr-success-border: #c3e8cf; --lr-info: #2e4fc4; --lr-info-bg: #f0f4ff; --lr-info-border: #cdd9fb; --lr-meter-1: #d4483b; --lr-meter-2: #d98a0b; --lr-meter-3: #3f7de0; --lr-meter-4: #16a34a; --lr-shadow-card: 0 1px 2px rgba(16, 24, 64, 0.05), 0 18px 48px -20px rgba(16, 24, 64, 0.22); --lr-shadow-pop: 0 12px 32px -12px rgba(16, 24, 64, 0.28); } html.dark { color-scheme: dark; --lr-page: #0a0e27; --lr-glow-a: rgba(99, 115, 255, 0.16); --lr-glow-b: rgba(56, 152, 236, 0.10); --lr-card: #121834; --lr-card-edge: rgba(255, 255, 255, 0.06); --lr-inset: #161c3d; --lr-ink: #eef0fb; --lr-muted: #a9afcb; --lr-faint: #8a91b3; --lr-placeholder: #7c83a6; --lr-field: #191f42; --lr-field-hover: #1d244b; --lr-field-focus: #1b2247; --lr-border: #2c3461; --lr-border-strong: #3d4679; --lr-divider: #232a52; --lr-tint: #1b2250; --lr-tint-border: #3a4390; --lr-link: #aab4ff; --lr-link-hover: #cfd5ff; --lr-focus: #8593ff; --lr-ring: rgba(133, 147, 255, 0.30); --lr-primary: #3f51b5; --lr-primary-top: #5062c8; --lr-primary-ink: #ffffff; --lr-primary-shadow: rgba(3, 6, 24, 0.6); --lr-danger: #fb8b80; --lr-danger-field: #f07468; --lr-danger-ring: rgba(240, 116, 104, 0.24); --lr-danger-bg: rgba(240, 68, 56, 0.10); --lr-danger-border: rgba(240, 68, 56, 0.34); --lr-danger-ink: #fdd5d0; --lr-warning: #fbbf5c; --lr-warning-bg: rgba(247, 144, 9, 0.10); --lr-warning-border: rgba(247, 144, 9, 0.32); --lr-success: #6fd99a; --lr-success-strong: #4ade80; --lr-success-bg: rgba(18, 183, 106, 0.10); --lr-success-border: rgba(18, 183, 106, 0.32); --lr-info: #9db4ff; --lr-info-bg: rgba(99, 132, 255, 0.11); --lr-info-border: rgba(99, 132, 255, 0.34); --lr-meter-1: #f07468; --lr-meter-2: #fbbf5c; --lr-meter-3: #7aa2ff; --lr-meter-4: #4ade80; --lr-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.7); --lr-shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, 0.6); } /* ── Base ───────────────────────────────────────────────────────────────── */ .lr, .lr *, .lr *::before, .lr *::after { box-sizing: border-box; } .lr [hidden] { display: none !important; } body.lr { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--lr-font); font-size: 16px; line-height: 1.5; color: var(--lr-ink); background: var(--lr-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .lr :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend) { margin: 0; padding: 0; } .lr :where(ul, ol) { list-style: none; } .lr :where(fieldset) { border: 0; min-width: 0; } .lr :where(img, svg) { display: block; } .lr :where(button, input, select, textarea) { font: inherit; color: inherit; } .lr :where(a) { color: inherit; } .lr .lr-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Visible, consistent focus everywhere on the page */ .lr :focus { outline: none; } .lr :focus-visible { outline: 2px solid var(--lr-focus); outline-offset: 2px; border-radius: 6px; } .lr .lr-skip { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--lr-card); color: var(--lr-ink); font-size: .875rem; font-weight: 600; text-decoration: none; box-shadow: var(--lr-shadow-pop); transform: translateY(-160%); transition: transform var(--lr-t2) var(--lr-ease-out); } .lr .lr-skip:focus-visible { transform: none; } .lr .lr-link { color: var(--lr-link); font-weight: 600; text-decoration: none; border-radius: 4px; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color var(--lr-t1) var(--lr-ease), background-size var(--lr-t2) var(--lr-ease-out); } .lr .lr-link:hover { color: var(--lr-link-hover); background-size: 100% 1px; } /* ── Shell ──────────────────────────────────────────────────────────────── */ .lr .lr-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; } /* ── Promo panel ────────────────────────────────────────────────────────── */ .lr .lr-promo { position: relative; isolation: isolate; overflow: hidden; color: #ffffff; background: #0b1434; padding: 20px 16px 76px; /* Stacked layouts: fade the hero into the page instead of a hard edge */ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); } .lr .lr-promo__media, .lr .lr-promo__scrim, .lr .lr-promo__orbs, .lr .lr-promo__grain { position: absolute; inset: 0; pointer-events: none; } .lr .lr-promo__media { z-index: -4; } .lr .lr-promo__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transform: scale(1.06); animation: lrMediaIn 900ms var(--lr-ease-out) both; } .lr .lr-promo__scrim { z-index: -3; background: radial-gradient(120% 70% at 0% 0%, rgba(26, 35, 126, 0.55), transparent 60%), linear-gradient(170deg, rgba(26, 35, 126, 0.88) 0%, rgba(13, 20, 58, 0.90) 50%, rgba(7, 11, 34, 0.96) 100%); } .lr .lr-promo__orbs { z-index: -2; overflow: hidden; } .lr .lr-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; } .lr .lr-orb--a { width: 60%; aspect-ratio: 1; top: -18%; right: 4%; background: radial-gradient(circle, rgba(121, 169, 255, 0.55), transparent 70%); animation: lrDriftA 28s ease-in-out infinite alternate; } .lr .lr-orb--b { width: 70%; aspect-ratio: 1; bottom: -30%; left: -24%; background: radial-gradient(circle, rgba(99, 102, 241, 0.45), transparent 70%); animation: lrDriftB 34s ease-in-out infinite alternate; } .lr .lr-promo__grain { z-index: -1; opacity: .07; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); } .lr .lr-promo__inner { position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 660px; margin: 0 auto; } .lr .lr-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: inherit; border-radius: 12px; align-self: flex-start; } .lr .lr-brand__mark { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.96); padding: 3px; object-fit: contain; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .lr .lr-brand__text strong { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; } .lr .lr-brand__text span { display: block; margin-top: 3px; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(226, 231, 255, 0.78); } .lr .lr-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(226, 231, 255, 0.82); } .lr .lr-eyebrow::before { content: ''; width: 20px; height: 2px; border-radius: 99px; background: hsl(213 94% 72%); box-shadow: 0 0 12px hsl(213 94% 68% / .7); } .lr .lr-headline { margin-top: 10px; font-size: clamp(1.75rem, 6.4vw, 2.25rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; max-width: 18ch; } .lr .lr-headline em { font-style: normal; background: linear-gradient(110deg, hsl(213 94% 78%), hsl(236 90% 80%) 60%, hsl(213 94% 78%)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lr .lr-lede { margin-top: 12px; max-width: 44ch; font-size: .9375rem; line-height: 1.6; color: rgba(226, 231, 255, 0.84); } .lr .lr-props { display: grid; gap: 10px; margin-top: 20px; } .lr .lr-prop { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lr .lr-prop__icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; color: hsl(213 94% 80%); background: linear-gradient(145deg, rgba(121, 169, 255, 0.24), rgba(99, 102, 241, 0.12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .lr .lr-prop strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.35; } .lr .lr-prop strong + span { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.45; color: rgba(226, 231, 255, 0.74); } .lr .lr-promo__foot { display: none; } .lr .lr-journey { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 500; color: rgba(226, 231, 255, 0.86); } .lr .lr-journey li { display: inline-flex; align-items: center; gap: 8px; } .lr .lr-journey li + li::before { content: ''; width: 20px; height: 1px; margin-right: 2px; background: rgba(255, 255, 255, 0.28); } .lr .lr-journey li > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .lr .lr-trust { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: .75rem; line-height: 1.4; color: rgba(226, 231, 255, 0.72); } .lr .lr-trust strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; } .lr .lr-trust img { width: 32px; height: 32px; border-radius: 50%; background: #ffffff; padding: 2px; flex-shrink: 0; } /* Entrance: brand → copy → props, staggered */ .lr .lr-reveal { animation: lrRise var(--lr-t3) var(--lr-ease-out) both; } .lr .lr-promo .lr-reveal:nth-of-type(1) { animation-delay: 60ms; } .lr .lr-promo__copy .lr-eyebrow { animation-delay: 100ms; } .lr .lr-promo__copy .lr-headline { animation-delay: 150ms; } .lr .lr-promo__copy .lr-lede { animation-delay: 200ms; } .lr .lr-props .lr-prop:nth-child(1) { animation-delay: 250ms; } .lr .lr-props .lr-prop:nth-child(2) { animation-delay: 300ms; } .lr .lr-props .lr-prop:nth-child(3) { animation-delay: 350ms; } .lr .lr-promo__foot { animation-delay: 400ms; } /* ── Main column ────────────────────────────────────────────────────────── */ .lr .lr-main { position: relative; isolation: isolate; min-width: 0; padding: 0 12px 28px; margin-top: -52px; } .lr .lr-main::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 90% 0%, var(--lr-glow-a), transparent 70%), radial-gradient(50% 36% at 0% 100%, var(--lr-glow-b), transparent 70%); } /* Mobile: tools float over the hero, top-right (positioned on .lr-shell) */ .lr .lr-topbar { position: absolute; z-index: 5; top: 18px; right: 12px; display: flex; align-items: center; gap: 6px; } .lr .lr-topbar__signin { display: flex; align-items: center; gap: 6px; font-size: .8125rem; } .lr .lr-topbar__signin > span { display: none; color: var(--lr-muted); } .lr .lr-topbar .lr-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: #ffffff; } .lr .lr-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #ffffff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform var(--lr-t1) var(--lr-ease), background-color var(--lr-t1) var(--lr-ease); } .lr .lr-iconbtn:hover { background: rgba(255, 255, 255, 0.16); } .lr .lr-iconbtn:active { transform: scale(.94); } .lr .lr-iconbtn svg { transition: transform var(--lr-t3) var(--lr-ease-out), opacity var(--lr-t2) var(--lr-ease); } .lr .lr-icon-sun { display: none; } html.dark .lr .lr-icon-sun { display: block; } html.dark .lr .lr-icon-moon { display: none; } /* ── Card ───────────────────────────────────────────────────────────────── */ .lr .lr-card { position: relative; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 18px 20px; border-radius: 22px; background: var(--lr-card); border: 1px solid var(--lr-card-edge); box-shadow: var(--lr-shadow-card); animation: lrRise var(--lr-t3) 80ms var(--lr-ease-out) both; } html.dark .lr .lr-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 120px), var(--lr-card); } .lr .lr-kicker { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lr-link); } .lr .lr-title { margin-top: 6px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; color: var(--lr-ink); } .lr .lr-title:focus { outline: none; } .lr .lr-subtitle { margin-top: 6px; font-size: .9375rem; line-height: 1.55; color: var(--lr-muted); max-width: 52ch; } /* ── Progress / stepper ─────────────────────────────────────────────────── */ .lr .lr-progress { margin-top: 22px; padding: 14px 10px 12px; border-radius: 16px; background: var(--lr-inset); border: 1px solid var(--lr-divider); } .lr .lr-progress__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 0 4px 12px; } .lr .lr-progress__meta > p:first-child { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .lr .lr-progress__count { font-size: .8125rem; font-weight: 700; color: var(--lr-ink); font-variant-numeric: tabular-nums; } .lr .lr-progress__eta { font-size: .75rem; color: var(--lr-muted); } .lr .lr-progress__eta::before { content: '·'; margin-right: 8px; color: var(--lr-faint); } .lr .lr-save { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--lr-muted); animation: lrFade var(--lr-t2) var(--lr-ease) both; } .lr .lr-save__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lr-success-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lr-success-strong) 22%, transparent); } .lr .lr-save.is-saving .lr-save__dot { background: var(--lr-faint); box-shadow: none; animation: lrPulse 900ms ease-in-out infinite; } .lr .lr-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .lr .lr-steps__item { position: relative; z-index: 1; min-width: 0; } .lr .lr-steps__track { position: absolute; z-index: 0; top: 21px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; background: var(--lr-border); overflow: hidden; } .lr .lr-steps__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--lr-primary-top), hsl(213 90% 62%)); transform-origin: left center; transform: scaleX(0); transition: transform var(--lr-t3) var(--lr-ease-out); } .lr .lr-steps__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 2px 2px 4px; border: 0; border-radius: 12px; background: transparent; color: var(--lr-muted); text-align: center; cursor: pointer; } .lr .lr-steps__btn:disabled { cursor: default; } .lr .lr-steps__dot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--lr-border-strong); background: var(--lr-card); color: var(--lr-muted); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: transform var(--lr-t2) var(--lr-ease-spring), border-color var(--lr-t2) var(--lr-ease), background-color var(--lr-t2) var(--lr-ease), color var(--lr-t2) var(--lr-ease); } .lr .lr-steps__dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 4px var(--lr-ring); opacity: 0; transform: scale(.8); transition: opacity var(--lr-t2) var(--lr-ease), transform var(--lr-t3) var(--lr-ease-out); } .lr .lr-steps__num, .lr .lr-steps__check { grid-area: 1 / 1; } .lr .lr-steps__check { opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity var(--lr-t2) var(--lr-ease), transform var(--lr-t3) var(--lr-ease-spring); } .lr .lr-steps__num { transition: opacity var(--lr-t1) var(--lr-ease), transform var(--lr-t2) var(--lr-ease-out); } .lr .lr-steps__name { max-width: 100%; font-size: .75rem; font-weight: 600; line-height: 1.25; color: var(--lr-muted); transition: color var(--lr-t2) var(--lr-ease); } .lr .lr-steps__sub { display: none; } .lr .lr-steps__item.is-active .lr-steps__dot { border-color: var(--lr-primary-top); background: linear-gradient(180deg, var(--lr-primary-top), var(--lr-primary)); color: var(--lr-primary-ink); transform: scale(1.04); } .lr .lr-steps__item.is-active .lr-steps__dot::after { opacity: 1; transform: none; } .lr .lr-steps__item.is-active .lr-steps__name { color: var(--lr-ink); } .lr .lr-steps__item.is-done .lr-steps__dot { border-color: transparent; background: var(--lr-tint); color: var(--lr-link); box-shadow: inset 0 0 0 1.5px var(--lr-tint-border); } .lr .lr-steps__item.is-done .lr-steps__num { opacity: 0; transform: scale(.4); } .lr .lr-steps__item.is-done .lr-steps__check { opacity: 1; transform: none; } .lr .lr-steps__item.is-done .lr-steps__name { color: var(--lr-ink); } .lr .lr-steps__item.is-done .lr-steps__btn:hover .lr-steps__dot, .lr .lr-steps__item.is-reachable .lr-steps__btn:hover .lr-steps__dot { transform: translateY(-2px); border-color: var(--lr-focus); } .lr .lr-steps__btn:active:not(:disabled) .lr-steps__dot { transform: scale(.95); } /* ── Banners & alerts ───────────────────────────────────────────────────── */ .lr .lr-banner, .lr .lr-alert { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; font-size: .8125rem; line-height: 1.5; animation: lrRise var(--lr-t3) var(--lr-ease-out) both; } .lr .lr-banner p, .lr .lr-alert p { flex: 1; min-width: 0; } .lr .lr-banner strong, .lr .lr-alert strong { display: block; font-size: .875rem; font-weight: 600; } .lr .lr-banner span, .lr .lr-alert span:not(.lr-alert__icon) { display: block; margin-top: 2px; } .lr .lr-banner { background: var(--lr-info-bg); border: 1px solid var(--lr-info-border); color: var(--lr-ink); } .lr .lr-banner > svg { flex-shrink: 0; margin-top: 2px; color: var(--lr-info); } .lr .lr-banner .lr-btn { align-self: center; flex-shrink: 0; } .lr .lr-alert { background: var(--lr-danger-bg); border: 1px solid var(--lr-danger-border); color: var(--lr-danger-ink); } .lr .lr-alert__icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; color: var(--lr-danger); background: color-mix(in srgb, var(--lr-danger) 14%, transparent); } .lr .lr-alert .lr-alert__aside { margin-top: 6px; opacity: .88; } /* ── Form & steps ───────────────────────────────────────────────────────── */ .lr .lr-form { display: flex; flex-direction: column; margin-top: 8px; } .lr .lr-step { display: flex; flex-direction: column; gap: 20px; padding: 22px 0 24px; } .lr .lr-step__head { display: grid; gap: 4px; } .lr .lr-step__title { width: fit-content; font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--lr-ink); border-radius: 6px; } .lr .lr-step__title:focus { outline: none; } .lr .lr-step__title:focus-visible { outline: 2px solid var(--lr-focus); outline-offset: 4px; } .lr .lr-step__desc { font-size: .875rem; line-height: 1.55; color: var(--lr-muted); } /* Direction-aware step entrance + stagger of the rows inside it */ .lr .lr-step.is-enter-forward > *, .lr .lr-step.is-enter-back > * { animation: var(--lr-step-anim, lrStepForward) var(--lr-t3) var(--lr-ease-out) both; animation-delay: calc(var(--lr-i, 0) * 30ms); } .lr .lr-step.is-enter-back { --lr-step-anim: lrStepBack; } .lr .lr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 16px; } .lr .lr-field { position: relative; display: flex; flex-direction: column; min-width: 0; } .lr .lr-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--lr-ink); transition: color var(--lr-t1) var(--lr-ease); } .lr .lr-field:focus-within > .lr-label { color: var(--lr-link); } .lr .lr-opt { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--lr-muted); padding: 1px 7px; border-radius: 999px; background: var(--lr-inset); border: 1px solid var(--lr-divider); } /* Control shell: icon + input + validity tick; the focus glow is a pseudo-element faded with opacity (no box-shadow transitions). */ .lr .lr-control { position: relative; } .lr .lr-control::after { content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 4px var(--lr-ring); opacity: 0; transition: opacity var(--lr-t2) var(--lr-ease); } .lr .lr-control:focus-within::after { opacity: 1; } .lr .lr-field.has-error .lr-control::after { box-shadow: 0 0 0 4px var(--lr-danger-ring); } .lr .lr-control__icon { position: absolute; z-index: 1; left: 15px; top: 16px; color: var(--lr-faint); pointer-events: none; transition: color var(--lr-t1) var(--lr-ease); } .lr .lr-control:focus-within .lr-control__icon { color: var(--lr-focus); } .lr .lr-field.has-error .lr-control__icon { color: var(--lr-danger-field); } .lr .lr-control__ok, .lr .lr-control__chev { position: absolute; z-index: 1; right: 15px; top: 16px; pointer-events: none; } .lr .lr-control__chev { color: var(--lr-muted); } .lr .lr-control__ok { color: var(--lr-success-strong); opacity: 0; transform: scale(.5); transition: opacity var(--lr-t1) var(--lr-ease), transform var(--lr-t2) var(--lr-ease-spring); } .lr .lr-field.is-valid .lr-control__ok { opacity: 1; transform: none; } .lr .lr-input { display: block; width: 100%; height: 48px; margin: 0; padding: 0 42px 0 44px; border: 1px solid var(--lr-border); border-radius: 12px; background: var(--lr-field); color: var(--lr-ink); font-size: .9375rem; line-height: 1.4; outline: none; -webkit-appearance: none; appearance: none; transition: border-color var(--lr-t1) var(--lr-ease), background-color var(--lr-t1) var(--lr-ease); } .lr .lr-input::placeholder { color: var(--lr-placeholder); opacity: 1; } .lr .lr-input:hover { background: var(--lr-field-hover); border-color: var(--lr-border-strong); } .lr .lr-input:focus, .lr .lr-input:focus-visible { background: var(--lr-field-focus); border-color: var(--lr-focus); outline: none; } .lr .lr-input:-webkit-autofill { -webkit-text-fill-color: var(--lr-ink); -webkit-box-shadow: 0 0 0 1000px var(--lr-tint) inset; caret-color: var(--lr-ink); } .lr .lr-input--plain { padding-left: 14px; padding-right: 14px; } .lr select.lr-input { cursor: pointer; padding-right: 44px; } .lr .lr-input--area { height: auto; min-height: 108px; padding-top: 13px; padding-bottom: 13px; line-height: 1.55; resize: vertical; } .lr .lr-input--short { min-height: 80px; } .lr .lr-input--toggle { padding-right: 52px; } .lr .lr-field.has-error .lr-input { border-color: var(--lr-danger-field); } .lr .lr-field.is-valid .lr-input:not(:focus) { border-color: color-mix(in srgb, var(--lr-success-strong) 45%, var(--lr-border)); } /* Shake once when a step is blocked */ .lr .lr-field.is-shaking .lr-control, .lr .lr-field.is-shaking > .lr-input, .lr .lr-fieldset.is-shaking .lr-choices, .lr .lr-field.is-shaking .lr-drop { animation: lrShake 320ms var(--lr-ease) both; } .lr .lr-hint { margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: var(--lr-muted); } .lr .lr-hint--icon { display: flex; align-items: center; gap: 8px; margin-top: 0; } .lr .lr-hint--icon svg { flex-shrink: 0; color: var(--lr-success); } .lr .lr-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .lr .lr-counter { flex-shrink: 0; margin-top: 6px; font-size: .75rem; color: var(--lr-muted); font-variant-numeric: tabular-nums; } .lr .lr-counter.is-near { color: var(--lr-warning); } .lr .lr-counter.is-over { color: var(--lr-danger); font-weight: 600; } .lr .lr-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--lr-danger); animation: lrErrorIn var(--lr-t2) var(--lr-ease-out) both; } .lr .lr-error::before { content: ''; flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; } .lr .lr-field.has-error .lr-hint:not(.lr-hint--keep) { display: none; } /* ── College choice cards ───────────────────────────────────────────────── */ .lr .lr-fieldset > .lr-label { float: none; width: 100%; margin-bottom: 0; } .lr .lr-fieldset > .lr-hint { margin: 4px 0 10px; } .lr .lr-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .lr .lr-choice { position: relative; display: block; cursor: pointer; } .lr .lr-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .lr .lr-choice__card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 44px 12px 12px; border-radius: 14px; border: 1px solid var(--lr-border); background: var(--lr-field); transition: border-color var(--lr-t1) var(--lr-ease), background-color var(--lr-t1) var(--lr-ease), transform var(--lr-t1) var(--lr-ease); } .lr .lr-choice:hover .lr-choice__card { border-color: var(--lr-border-strong); background: var(--lr-field-hover); } .lr .lr-choice:active .lr-choice__card { transform: scale(.985); } .lr .lr-choice input:focus-visible + .lr-choice__card { outline: 2px solid var(--lr-focus); outline-offset: 2px; } .lr .lr-choice__icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; color: var(--lr-link); background: var(--lr-tint); transition: transform var(--lr-t2) var(--lr-ease-spring); } .lr .lr-choice__text { min-width: 0; } .lr .lr-choice__text strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--lr-ink); } .lr .lr-choice__text span { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.4; color: var(--lr-muted); } .lr .lr-choice__tick { position: absolute; top: 50%; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; border-radius: 7px; border: 1.5px solid var(--lr-border-strong); background: var(--lr-card); color: transparent; transition: background-color var(--lr-t1) var(--lr-ease), border-color var(--lr-t1) var(--lr-ease); } .lr .lr-choice__tick svg { transform: scale(.3); opacity: 0; transition: transform var(--lr-t2) var(--lr-ease-spring), opacity var(--lr-t1) var(--lr-ease); } .lr .lr-choice input:checked + .lr-choice__card { border-color: var(--lr-focus); background: var(--lr-tint); } .lr .lr-choice input:checked + .lr-choice__card .lr-choice__icon { transform: scale(1.06); } .lr .lr-choice input:checked + .lr-choice__card .lr-choice__tick { border-color: var(--lr-primary-top); background: var(--lr-primary-top); color: #ffffff; } .lr .lr-choice input:checked + .lr-choice__card .lr-choice__tick svg { transform: none; opacity: 1; } .lr .lr-fieldset.has-error .lr-choice__card { border-color: var(--lr-danger-field); } /* ── Logo dropzone ──────────────────────────────────────────────────────── */ .lr .lr-drop { position: relative; } .lr .lr-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .lr .lr-drop__zone { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--lr-border-strong); background: var(--lr-field); cursor: pointer; transition: border-color var(--lr-t1) var(--lr-ease), background-color var(--lr-t1) var(--lr-ease), transform var(--lr-t2) var(--lr-ease-out); } .lr .lr-drop__zone:hover { border-color: var(--lr-focus); background: var(--lr-field-hover); } .lr .lr-drop__input:focus-visible ~ .lr-drop__zone, .lr .lr-drop__input:focus-visible ~ .lr-drop__file { outline: 2px solid var(--lr-focus); outline-offset: 2px; } .lr .lr-drop.is-dragover .lr-drop__zone { border-style: solid; border-color: var(--lr-focus); background: var(--lr-tint); transform: scale(1.01); } .lr .lr-drop__icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; color: var(--lr-link); background: var(--lr-tint); transition: transform var(--lr-t2) var(--lr-ease-spring); } .lr .lr-drop.is-dragover .lr-drop__icon { transform: translateY(-3px) scale(1.06); } .lr .lr-drop__text { display: grid; gap: 2px; min-width: 0; font-size: .8125rem; color: var(--lr-muted); } .lr .lr-drop__text strong { font-size: .875rem; font-weight: 600; color: var(--lr-ink); } .lr .lr-drop__fine { display: none; } .lr .lr-drop__browse { color: var(--lr-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .lr .lr-drop__browse::first-letter { text-transform: uppercase; } .lr .lr-drop__file { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; border: 1px solid var(--lr-border); background: var(--lr-field); animation: lrRise var(--lr-t2) var(--lr-ease-out) both; } .lr .lr-drop[data-state="ready"] .lr-drop__file { border-color: color-mix(in srgb, var(--lr-success-strong) 45%, var(--lr-border)); } .lr .lr-drop__thumb { display: block; width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: repeating-conic-gradient(var(--lr-divider) 0% 25%, var(--lr-card) 0% 50%) 50% / 12px 12px; box-shadow: inset 0 0 0 1px var(--lr-border); } .lr .lr-drop__thumb img { width: 100%; height: 100%; object-fit: contain; } .lr .lr-drop__meta { display: grid; gap: 2px; flex: 1; min-width: 0; } .lr .lr-drop__meta strong { font-size: .875rem; font-weight: 600; color: var(--lr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr .lr-drop__meta > span:not(.lr-drop__bar) { font-size: .75rem; color: var(--lr-muted); } .lr .lr-drop[data-state="ready"] #logoMeta { color: var(--lr-success); } .lr .lr-drop__bar { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--lr-divider); overflow: hidden; } .lr .lr-drop__bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--lr-primary-top), hsl(213 90% 62%)); transform-origin: left center; transform: scaleX(0); transition: transform var(--lr-t2) var(--lr-ease-out); } .lr .lr-drop[data-state="ready"] .lr-drop__bar > span { background: var(--lr-success-strong); } .lr .lr-drop__actions { display: flex; gap: 6px; flex-shrink: 0; } /* ── Map ────────────────────────────────────────────────────────────────── */ .lr .lr-map { position: relative; height: clamp(240px, 42vw, 340px); border-radius: 16px; overflow: hidden; border: 1px solid var(--lr-border); background: var(--lr-inset); } .lr .lr-map__canvas { position: absolute; inset: 0; } .lr .lr-map__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .8125rem; color: var(--lr-muted); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lr-card) 60%, transparent), transparent) 0 0 / 50% 100% no-repeat, var(--lr-inset); pointer-events: none; transition: opacity var(--lr-t3) var(--lr-ease); } .lr .lr-map.is-ready .lr-map__placeholder { opacity: 0; } .lr .lr-map.is-failed .lr-map__placeholder .lr-spinner { display: none; } .lr .lr-map__coords { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 5px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #ffffff; background: rgba(10, 14, 39, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; } .lr .lr-map__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; } .lr .lr-map__status { margin-top: 0; flex: 1 1 220px; } /* Address suggestions (combobox listbox) */ .lr .lr-suggest { position: absolute; top: calc(8px + 48px + 1.35em + 8px); left: 0; right: 0; z-index: 30; max-height: 260px; overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--lr-border); background: var(--lr-card); box-shadow: var(--lr-shadow-pop); animation: lrRise var(--lr-t2) var(--lr-ease-out) both; } .lr .lr-suggest__item { padding: 10px 12px; border-radius: 10px; font-size: .875rem; line-height: 1.4; color: var(--lr-ink); cursor: pointer; } .lr .lr-suggest__item:hover, .lr .lr-suggest__item[aria-selected="true"] { background: var(--lr-tint); } /* ── Grouped optional sections ──────────────────────────────────────────── */ .lr .lr-group { display: grid; gap: 18px; padding: 18px 16px 16px; border-radius: 16px; border: 1px solid var(--lr-divider); background: var(--lr-inset); } .lr .lr-group__legend { display: inline-flex; align-items: center; gap: 8px; float: left; width: 100%; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-muted); } .lr .lr-group__legend + * { clear: both; } .lr .lr-group__legend .lr-opt { text-transform: none; letter-spacing: .02em; } .lr .lr-group .lr-input { background: var(--lr-card); } .lr .lr-group .lr-input:hover { background: var(--lr-field-hover); } /* ── Password ───────────────────────────────────────────────────────────── */ .lr .lr-pwtoggle { position: absolute; z-index: 2; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--lr-muted); cursor: pointer; transition: color var(--lr-t1) var(--lr-ease), background-color var(--lr-t1) var(--lr-ease); } .lr .lr-pwtoggle:hover { color: var(--lr-ink); background: var(--lr-field-hover); } .lr .lr-pwtoggle .lr-eye-off { display: none; } .lr .lr-pwtoggle[aria-pressed="true"] .lr-eye { display: none; } .lr .lr-pwtoggle[aria-pressed="true"] .lr-eye-off { display: block; } .lr .lr-strength { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .lr .lr-strength__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 0 0 112px; } .lr .lr-strength__bars i { display: block; height: 4px; border-radius: 99px; background: var(--lr-border); overflow: hidden; position: relative; } .lr .lr-strength__bars i::after { content: ''; position: absolute; inset: 0; background: var(--lr-meter, var(--lr-meter-1)); transform-origin: left center; transform: scaleX(0); transition: transform var(--lr-t2) var(--lr-ease-out); } .lr .lr-strength[data-score="1"] { --lr-meter: var(--lr-meter-1); } .lr .lr-strength[data-score="2"] { --lr-meter: var(--lr-meter-2); } .lr .lr-strength[data-score="3"] { --lr-meter: var(--lr-meter-3); } .lr .lr-strength[data-score="4"] { --lr-meter: var(--lr-meter-4); } .lr .lr-strength[data-score="1"] i:nth-child(-n+1)::after, .lr .lr-strength[data-score="2"] i:nth-child(-n+2)::after, .lr .lr-strength[data-score="3"] i:nth-child(-n+3)::after, .lr .lr-strength[data-score="4"] i:nth-child(-n+4)::after { transform: none; } .lr .lr-strength__bars i:nth-child(2)::after { transition-delay: 30ms; } .lr .lr-strength__bars i:nth-child(3)::after { transition-delay: 60ms; } .lr .lr-strength__bars i:nth-child(4)::after { transition-delay: 90ms; } .lr .lr-strength__text { font-size: .75rem; font-weight: 500; color: var(--lr-muted); } .lr .lr-strength[data-score="1"] .lr-strength__text { color: var(--lr-danger); } .lr .lr-strength[data-score="4"] .lr-strength__text { color: var(--lr-success); } .lr .lr-reqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .lr .lr-reqs li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: .6875rem; font-weight: 500; color: var(--lr-muted); background: var(--lr-card); border: 1px solid var(--lr-border); transition: color var(--lr-t1) var(--lr-ease), border-color var(--lr-t1) var(--lr-ease), background-color var(--lr-t1) var(--lr-ease); } .lr .lr-reqs li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .6; } .lr .lr-reqs li.is-met { color: var(--lr-success); border-color: var(--lr-success-border); background: var(--lr-success-bg); } .lr .lr-reqs li.is-met::before { border: 0; opacity: 1; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; } .lr .lr-match, .lr .lr-caps { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .8125rem; font-weight: 500; animation: lrErrorIn var(--lr-t2) var(--lr-ease-out) both; } .lr .lr-match { color: var(--lr-success); } .lr .lr-match.is-off { color: var(--lr-muted); } .lr .lr-caps { color: var(--lr-warning); } /* ── Review ─────────────────────────────────────────────────────────────── */ .lr .lr-review { display: grid; gap: 12px; } .lr .lr-review__group { border-radius: 16px; border: 1px solid var(--lr-border); background: var(--lr-card); overflow: hidden; } .lr .lr-review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; background: var(--lr-inset); border-bottom: 1px solid var(--lr-divider); } .lr .lr-review__head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; font-weight: 700; color: var(--lr-ink); } .lr .lr-review__head h4 span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .6875rem; color: var(--lr-link); background: var(--lr-tint); } .lr .lr-review__list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 6px 16px 10px; } .lr .lr-review__row { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--lr-divider); } .lr .lr-review__row:last-child { border-bottom: 0; } .lr .lr-review__row dt { font-size: .75rem; font-weight: 500; color: var(--lr-muted); } .lr .lr-review__row dd { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--lr-ink); overflow-wrap: anywhere; white-space: pre-line; } .lr .lr-review__row dd.is-empty { color: var(--lr-faint); font-style: italic; } .lr .lr-review__logo { display: inline-flex; align-items: center; gap: 10px; } .lr .lr-review__logo img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: #ffffff; box-shadow: inset 0 0 0 1px var(--lr-border); } .lr .lr-tags { display: flex; flex-wrap: wrap; gap: 6px; } .lr .lr-tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--lr-link); background: var(--lr-tint); border: 1px solid var(--lr-tint-border); } .lr .lr-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--lr-info-bg); border: 1px solid var(--lr-info-border); font-size: .8125rem; line-height: 1.55; color: var(--lr-ink); } .lr .lr-callout svg { flex-shrink: 0; margin-top: 1px; color: var(--lr-info); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .lr .lr-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--lr-t1) var(--lr-ease), background-color var(--lr-t1) var(--lr-ease), border-color var(--lr-t1) var(--lr-ease), color var(--lr-t1) var(--lr-ease); } .lr .lr-btn svg { flex-shrink: 0; transition: transform var(--lr-t2) var(--lr-ease-out); } .lr .lr-btn:active:not(:disabled) { transform: scale(.975); } .lr .lr-btn:disabled { cursor: not-allowed; } .lr .lr-btn--primary { color: var(--lr-primary-ink); background: linear-gradient(180deg, var(--lr-primary-top), var(--lr-primary)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(16, 24, 64, 0.2); } /* Hover lift glow lives on a pseudo-element so only opacity animates */ .lr .lr-btn--primary::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 12px 28px -8px var(--lr-primary-shadow); opacity: .55; transition: opacity var(--lr-t2) var(--lr-ease); } .lr .lr-btn--primary { isolation: isolate; } .lr .lr-btn--primary:hover:not(:disabled) { transform: translateY(-1px); } .lr .lr-btn--primary:hover:not(:disabled)::after { opacity: 1; } .lr .lr-btn--primary:active:not(:disabled) { transform: translateY(0) scale(.975); } .lr .lr-btn--primary:hover:not(:disabled) svg:last-child { transform: translateX(3px); } .lr .lr-btn--primary:disabled { opacity: .72; } .lr .lr-btn--ghost { color: var(--lr-ink); background: var(--lr-card); border-color: var(--lr-border); } .lr .lr-btn--ghost:hover:not(:disabled) { border-color: var(--lr-border-strong); background: var(--lr-field-hover); } .lr #regBack:hover:not(:disabled) svg { transform: translateX(-3px); } .lr .lr-btn--sm { min-height: 44px; padding: 0 14px; font-size: .8125rem; border-radius: 11px; } .lr .lr-btn--icon { width: 44px; padding: 0; } .lr .lr-btn.is-loading svg { animation: lrSpin 900ms linear infinite; } .lr .lr-spinner { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lrSpin 700ms linear infinite; } .lr .lr-btn--submit .lr-spinner { display: none; } .lr .lr-btn--submit.is-loading .lr-spinner { display: block; } /* ── Action bar ─────────────────────────────────────────────────────────── */ .lr .lr-actions { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; margin: 0 -18px -20px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lr-divider); border-radius: 0 0 22px 22px; background: color-mix(in srgb, var(--lr-card) 88%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); } .lr .lr-actions .lr-btn { flex: 1; } .lr .lr-actions #regBack { flex: 0 0 auto; } .lr .lr-actions__hint { display: none; } .lr kbd { display: inline-block; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--lr-border); border-bottom-width: 2px; background: var(--lr-card); font-family: inherit; font-size: .6875rem; font-weight: 600; color: var(--lr-ink); } .lr .lr-foot { margin: 18px auto 0; max-width: 760px; text-align: center; font-size: .8125rem; color: var(--lr-muted); } .lr .lr-foot .lr-link { display: inline-flex; min-height: 44px; align-items: center; } /* ── Success ────────────────────────────────────────────────────────────── */ .lr .lr-success { text-align: center; padding: 12px 4px 4px; } .lr .lr-success__badge { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; color: var(--lr-success-strong); background: var(--lr-success-bg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--lr-success-strong) 8%, transparent); animation: lrPop 420ms var(--lr-ease-spring) both; } .lr .lr-success__badge::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--lr-success-strong); opacity: 0; animation: lrRipple 900ms 380ms var(--lr-ease-out) both; } .lr .lr-draw { stroke-dasharray: 210; stroke-dashoffset: 0; } .lr .lr-draw--ring { opacity: .35; animation: lrDraw 520ms 120ms var(--lr-ease-out) both; } .lr .lr-draw--tick { stroke-dasharray: 44; animation: lrDrawTick 320ms 420ms var(--lr-ease-out) both; } .lr .lr-success .lr-subtitle { margin-left: auto; margin-right: auto; } .lr .lr-next { display: grid; gap: 10px; margin: 24px auto 0; max-width: 560px; text-align: left; counter-reset: next; } .lr .lr-next li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--lr-border); background: var(--lr-inset); } .lr .lr-next__icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; color: var(--lr-link); background: var(--lr-tint); } .lr .lr-next li > span:last-child > strong { display: block; font-size: .875rem; font-weight: 600; color: var(--lr-ink); } .lr .lr-next li > span:last-child > span { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.5; color: var(--lr-muted); } .lr .lr-note { margin-top: 16px; font-size: .8125rem; color: var(--lr-muted); } .lr .lr-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; } .lr .lr-success__actions .lr-btn { flex: 1 1 220px; max-width: 280px; } .lr .lr-rise { animation: lrRise var(--lr-t3) var(--lr-ease-out) both; } .lr .lr-success .lr-rise:nth-child(2) { animation-delay: 300ms; } .lr .lr-success .lr-rise:nth-child(3) { animation-delay: 340ms; } .lr .lr-success .lr-rise:nth-child(4) { animation-delay: 380ms; } .lr .lr-next .lr-rise:nth-child(1) { animation-delay: 440ms; } .lr .lr-next .lr-rise:nth-child(2) { animation-delay: 480ms; } .lr .lr-next .lr-rise:nth-child(3) { animation-delay: 520ms; } .lr .lr-next .lr-rise:nth-child(4) { animation-delay: 560ms; } .lr .lr-success > .lr-note { animation-delay: 600ms; } .lr .lr-success__actions { animation-delay: 640ms; } /* ── Keyframes ──────────────────────────────────────────────────────────── */ @keyframes lrRise { from { opacity: 0; transform: translate3d(0, 10px, 0); } } @keyframes lrFade { from { opacity: 0; } } @keyframes lrMediaIn { from { opacity: 0; transform: scale(1.12); } } @keyframes lrStepForward { from { opacity: 0; transform: translate3d(28px, 0, 0); } } @keyframes lrStepBack { from { opacity: 0; transform: translate3d(-28px, 0, 0); } } @keyframes lrErrorIn { from { opacity: 0; transform: translate3d(0, -4px, 0); } } @keyframes lrShake { 0%, 100% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-5px, 0, 0); } 40% { transform: translate3d(4px, 0, 0); } 60% { transform: translate3d(-3px, 0, 0); } 80% { transform: translate3d(2px, 0, 0); } } @keyframes lrSpin { to { transform: rotate(360deg); } } @keyframes lrPulse { 50% { opacity: .35; } } @keyframes lrPop { from { opacity: 0; transform: scale(.6); } } @keyframes lrRipple { 0% { opacity: .5; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } } @keyframes lrDraw { from { stroke-dashoffset: 210; } } @keyframes lrDrawTick { from { stroke-dashoffset: 44; } } @keyframes lrDriftA { to { transform: translate3d(-12%, 10%, 0) scale(1.08); } } @keyframes lrDriftB { to { transform: translate3d(14%, -8%, 0) scale(1.1); } } /* ── < 640px: compact hero so the form starts above the fold ────────────── */ @media (max-width: 639.98px) { .lr .lr-headline { margin-top: 8px; } .lr .lr-lede { margin-top: 8px; font-size: .875rem; line-height: 1.55; } .lr .lr-props { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .lr .lr-prop { align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; } .lr .lr-prop__icon { width: 22px; height: 22px; border-radius: 50%; } .lr .lr-prop__icon svg { width: 13px; height: 13px; } .lr .lr-prop strong { font-size: .75rem; font-weight: 600; } .lr .lr-prop strong + span { display: none; } .lr .lr-counter:empty { display: none; } } .lr .lr-counter:empty { margin-top: 0; } /* ── ≥ 480px ────────────────────────────────────────────────────────────── */ @media (min-width: 480px) { .lr .lr-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lr .lr-drop__fine { display: inline; } .lr .lr-drop__browse::first-letter { text-transform: none; } .lr .lr-steps__name { font-size: .8125rem; } } /* ── ≥ 640px (large phones landscape / small tablets) ───────────────────── */ @media (min-width: 640px) { .lr .lr-promo { padding: 28px 32px 88px; } .lr .lr-props { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lr .lr-prop { flex-direction: column; gap: 10px; } .lr .lr-main { padding: 0 24px 36px; } .lr .lr-topbar { right: 24px; top: 26px; } .lr .lr-card { padding: 32px 32px 24px; border-radius: 24px; } .lr .lr-actions { margin: 0 -32px -24px; padding: 14px 32px calc(14px + env(safe-area-inset-bottom)); border-radius: 0 0 24px 24px; } .lr .lr-actions .lr-btn { flex: 0 0 auto; } .lr .lr-actions #regNext, .lr .lr-actions #regSubmit { margin-left: auto; min-width: 180px; } .lr .lr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lr .lr-span-2 { grid-column: span 2; } .lr .lr-title { font-size: 1.75rem; } .lr .lr-progress { padding: 16px 12px 14px; } .lr .lr-review__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .lr .lr-review__row--wide { grid-column: span 2; } .lr .lr-group { padding: 20px 20px 18px; } } /* ── ≥ 1024px: split layout, sticky promo ───────────────────────────────── */ @media (min-width: 1024px) { .lr .lr-shell { grid-template-columns: minmax(380px, 40%) minmax(0, 1fr); } .lr .lr-promo { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 36px clamp(32px, 3.6vw, 56px) 32px; -webkit-mask-image: none; mask-image: none; } html.dark .lr .lr-promo { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07); } .lr .lr-promo__inner { height: 100%; max-width: 520px; margin: 0; gap: 0; } .lr .lr-promo__copy { margin: auto 0; padding: 32px 0; } .lr .lr-headline { font-size: clamp(2.25rem, 3.4vw, 3rem); max-width: 14ch; } .lr .lr-lede { font-size: 1rem; } .lr .lr-props { grid-template-columns: minmax(0, 1fr); margin-top: 28px; } .lr .lr-prop { flex-direction: row; gap: 12px; } .lr .lr-promo__foot { display: block; } .lr .lr-main { margin-top: 0; padding: 92px clamp(24px, 4vw, 64px) 40px; } .lr .lr-topbar { top: 24px; right: clamp(24px, 4vw, 64px); } .lr .lr-topbar__signin > span { display: inline; } .lr .lr-topbar .lr-link { color: var(--lr-link); padding: 0 6px; } .lr .lr-topbar .lr-link:hover { color: var(--lr-link-hover); } .lr .lr-iconbtn { color: var(--lr-ink); border-color: var(--lr-border); background: var(--lr-card); } .lr .lr-iconbtn:hover { background: var(--lr-field-hover); } .lr .lr-card { padding: 40px 40px 28px; } .lr .lr-actions { position: static; margin: 0; padding: 20px 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; } .lr .lr-actions__hint { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .75rem; color: var(--lr-muted); } .lr .lr-actions__hint + #regNext { margin-left: 0; } .lr .lr-steps__sub { display: block; font-size: .6875rem; color: var(--lr-faint); margin-top: -4px; } .lr .lr-progress { padding: 18px 16px 16px; } } @media (min-width: 1440px) { .lr .lr-shell { grid-template-columns: minmax(460px, 38%) minmax(0, 1fr); } .lr .lr-main { padding-top: 100px; } } /* Coarse pointers have no Enter key hint */ @media (hover: none) { .lr .lr-actions__hint { display: none !important; } } /* ── Reduced motion: final states, no movement ──────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lr *, .lr *::before, .lr *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .lr .lr-orb, .lr .lr-promo__media img { animation: none !important; transform: none !important; } .lr .lr-spinner, .lr .lr-btn.is-loading svg { animation: lrSpin 1.4s linear infinite !important; } } /* ── Desktop: single-screen layout. The page is locked to the window height and each step is laid out in columns so nothing needs to scroll. ────── */ @media (min-width: 1024px) and (min-height: 600px) { html:has(body.lr) { overflow: hidden; } body.lr, .lr .lr-shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } .lr .lr-main { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 56px clamp(20px, 3vw, 48px) 12px; } .lr .lr-card { max-width: 980px; padding: 18px 28px 12px; } .lr .lr-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .lr .lr-title { font-size: 1.375rem; } .lr .lr-subtitle, .lr .lr-steps__sub, .lr .lr-step__desc, .lr .lr-hint, .lr .lr-actions__hint { display: none !important; } .lr .lr-progress { padding: 8px 12px 6px; } .lr .lr-form { margin-top: 0; } .lr .lr-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px 20px; padding: 10px 0 8px; } .lr .lr-step > * { min-width: 0; } .lr .lr-step > .lr-step__head { grid-column: 1 / -1; grid-row: 1; } .lr .lr-step .lr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .lr .lr-step .lr-hint.lr-map__status { display: block !important; } .lr .lr-step .lr-field { gap: 4px; } .lr .lr-input--area { min-height: 0; height: 84px; resize: none; } .lr .lr-span-2 { grid-column: span 2; } /* Step 1: text fields left, colleges + logo right */ .lr .lr-step[data-step="1"] > :nth-child(2) { grid-column: 1; grid-row: 2; } .lr .lr-step[data-step="1"] > :nth-child(3) { grid-column: 1; grid-row: 3; } .lr .lr-step[data-step="1"] > :nth-child(4) { grid-column: 1; grid-row: 4; } .lr .lr-step[data-step="1"] > :nth-child(5) { grid-column: 2; grid-row: 2 / 4; } .lr .lr-step[data-step="1"] > :nth-child(6) { grid-column: 2; grid-row: 4; } .lr .lr-step[data-step="1"] .lr-choices { grid-template-columns: 1fr; gap: 8px; } /* Step 2: address left, map right */ .lr .lr-step[data-step="2"] > .lr-field--suggest { grid-column: 1; grid-row: 2; } .lr .lr-step[data-step="2"] > .lr-grid { grid-column: 1; grid-row: 3; } .lr .lr-step[data-step="2"] > .lr-field:last-child { grid-column: 2; grid-row: 2 / 4; } .lr .lr-step[data-step="2"] > .lr-field:last-child { align-self: start; } .lr .lr-step[data-step="2"] > .lr-grid > .lr-field:first-child { grid-column: 1 / -1; } .lr .lr-step[data-step="2"] > .lr-grid > .lr-span-2 { grid-column: span 1; } .lr .lr-step[data-step="2"] .lr-map { height: clamp(150px, 24vh, 260px); } /* Step 3: contact + online presence left, account security right */ .lr .lr-step[data-step="3"] > .lr-grid { grid-column: 1; grid-row: 2; } .lr .lr-step[data-step="3"] > .lr-group:nth-of-type(1) { grid-column: 1; grid-row: 3; } .lr .lr-step[data-step="3"] > .lr-group--security { grid-column: 2; grid-row: 2 / 4; } .lr .lr-step[data-step="3"] .lr-group--security .lr-grid { grid-template-columns: 1fr; } .lr .lr-step > .lr-review { grid-column: 1 / -1; grid-row: 2; } .lr .lr-group { padding: 12px 14px; gap: 10px; } .lr .lr-group .lr-input--area { height: 52px; } .lr .lr-actions { padding-top: 10px; } /* Slimmer progress tracker */ .lr .lr-progress__meta { padding-bottom: 4px; } .lr .lr-progress__eta { display: none; } .lr .lr-steps__dot { width: 28px; height: 28px; } .lr .lr-steps__name { font-size: .75rem; } }