/* * LeadLocate theme for SimpleSAMLphp (sso.leadlocate.com). * [ECOSYSTEM-SSO 2026-08-09 r3] Matched to the CRM login (leadlocate.com/login) * on purpose: same login_bg.jpg photo, same light card, same color logo, same * green button. One recognizable look across the whole ecosystem instead of a * separate design per app. * [SSO HUB 2026-08-09 r4] Added the four-app strip so people can see this one * screen signs them in to every LeadLocate app; redesigned the reset-password * page; footer now matches leadlocate.com/login exactly (lightgray, normal * weight, no shadow). Google Fonts link removed (CSP font-src 'self'); the * font stack matches the CRM which loads no web font either. */ :root { --ll-green: #065922; --ll-green-hi: #08752D; --ll-gold: #bc8908; --ll-gold-hi: #ce970d; --ll-card: #ECEFEF; --ll-card-w: 380px; --ll-ink: #333; --ll-ink-dim: #666; --ll-input-bg: #fff; --ll-input-border: #cfd3d4; --ll-radius: 5px; --ll-shadow: 0 0 30px rgba(0, 0, 0, 0.40); } * { box-sizing: border-box; } html, body { height: 100%; } body.ll-page { margin: 0; display: flex; flex-direction: column; min-height: 100%; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--ll-ink); /* [SSO HUB 2026-08-09 r7] No background-attachment:fixed - mobile Safari renders fixed backgrounds at the wrong scale, which was making the whole page look zoomed and pushing the footer off. Same as the CRM login, which does not use fixed. [r8] The fallback color is a soft neutral that blends with the photo, NOT the old deep green (#08752D) that flashed for a second or two while the image loaded. The photo is also preloaded in the , so it paints right away. */ background: #dbe1e0 url("../img/login_bg.jpg") center center / cover no-repeat; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .ll-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 48px 18px; } .ll-stage { width: 100%; max-width: 720px; margin: 0 auto; } .ll-login-wrap { width: 100%; max-width: var(--ll-card-w); margin: 0 auto; } /* ---------- the card ---------- */ .ll-panel { width: var(--ll-card-w); max-width: 100%; margin: 0 auto; border-radius: var(--ll-radius); background: var(--ll-card); box-shadow: var(--ll-shadow); overflow: hidden; /* [SSO HUB 2026-08-09 r8] The card settles in smoothly instead of snapping in, so the page feels considered. Honors reduced-motion below. */ animation: llPanelIn 0.45s cubic-bezier(0.16, 0.84, 0.44, 1) both; } @keyframes llPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ll-panel { animation: none; } } /* Inner hub pages (reset, welcome, profile) use the same width as the login card so every screen in the flow looks like the same card. */ .ll-stage > .ll-panel { width: var(--ll-card-w); max-width: 100%; } .ll-panel-head { background: #fff; padding: 24px 20px 20px; text-align: center; border-bottom: 1px solid #e4e7e7; } /* [SSO HUB 2026-08-09 r5] Big logo removed; the app icons carry the brand. .ll-logo kept in case a page still references it. */ .ll-logo { display: inline-block; width: 210px; max-width: 82%; height: auto; vertical-align: middle; } /* The single sign-on label now leads the card (no logo above it). */ .ll-chip { margin-top: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--ll-green-hi); } /* ---------- the four-app strip (this one login covers every app) ---------- */ .ll-apps { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; } .ll-appico { display: block; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.24); } .ll-apps-cap { margin: 11px 4px 0; font-size: 11.5px; line-height: 1.5; color: var(--ll-ink-dim); text-align: center; } .ll-panel-body { padding: 22px 22px 24px; } /* ---------- forms ---------- */ .ll-form { margin: 0; } .ll-field + .ll-field { margin-top: 14px; } .ll-form input[type="text"], .ll-form input[type="password"], .ll-form input[type="email"], .ll-field input[type="text"], .ll-field input[type="password"], .ll-field input[type="email"], .ll-select { width: 100%; padding: 11px 14px; margin: 0; font-family: inherit; font-size: 14px; color: var(--ll-ink); background: var(--ll-input-bg); border: 1px solid var(--ll-input-border); border-radius: var(--ll-radius); outline: none; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .ll-form input::placeholder, .ll-field input::placeholder { color: #9aa0a0; } .ll-form input[type="text"]:focus, .ll-form input[type="password"]:focus, .ll-form input[type="email"]:focus, .ll-field input[type="text"]:focus, .ll-field input[type="password"]:focus, .ll-field input[type="email"]:focus, .ll-select:focus { border-color: var(--ll-green-hi); box-shadow: 0 0 0 3px rgba(8, 117, 45, 0.12); } .ll-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- primary button (green, like the CRM Login) ---------- */ .ll-btn-login { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 16px; padding: 12px 16px; font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--ll-green); border: 0; border-radius: var(--ll-radius); cursor: pointer; transition: background .15s ease; } .ll-btn-login:hover { background: var(--ll-green-hi); } /* [PASSKEY-FIRST 2026-08-09 r10] passkey-first hub page */ .ll-view[hidden] { display: none; } .ll-view-title { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--ll-ink); text-align: center; } .ll-pk-ico { width: 18px; height: 18px; flex: 0 0 auto; } /* [SSO HUB 2026-08-09 r9] Right arrow on the login "Continue with SSO" button ("go ahead"); nudges forward on hover. */ .ll-btn-login .ll-arrow { width: 17px; height: 17px; margin-left: 8px; vertical-align: middle; position: relative; top: -1px; transition: transform .15s ease; } .ll-btn-login:hover .ll-arrow { transform: translateX(3px); } /* [SSO HUB 2026-08-09 r9] "Forgot Password" centered under the button. */ .ll-forgot-center { margin-top: 12px; text-align: center; } /* ---------- remember / reset row ---------- */ .ll-meta { margin-top: 14px; } .ll-forgot { margin-top: 14px; } .ll-meta-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .ll-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ll-ink-dim); cursor: pointer; margin: 0; } .ll-check input { accent-color: var(--ll-green); } a { color: var(--ll-green-hi); } .ll-forgot a, .ll-panel-body a { color: var(--ll-green-hi); text-decoration: none; font-size: 13.5px; } .ll-forgot a:hover, .ll-panel-body a:hover { text-decoration: underline; } /* The remember/reset row when both share a line. */ .ll-form .ll-meta.ll-meta-split, .ll-remember-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } /* ---------- secondary actions (passkey, get support) ---------- */ .ll-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid #dfe3e3; display: flex; gap: 10px; } .ll-btn-alt { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: center; color: #fff; background: var(--ll-ink-dim); border: 0; border-radius: var(--ll-radius); cursor: pointer; text-decoration: none; transition: background .15s ease, opacity .15s ease; } .ll-btn-alt:hover { opacity: .92; text-decoration: none; } a.ll-btn-alt, a.ll-btn-alt:visited, a.ll-btn-alt:hover { color: #fff; } /* Full width when it stands in a form field or the actions row; compact when it sits inline (e.g. the profile "Remove passkey" button). */ .ll-actions .ll-btn-alt { flex: 1 1 0; } .ll-field .ll-btn-alt { width: 100%; margin-top: 10px; } /* Passkey button reads as the recognizable green family; support is gold, the same gold the CRM login uses for Get Support. */ #ll-passkey-signin { background: var(--ll-green); } #ll-passkey-signin:hover { background: var(--ll-green-hi); opacity: 1; } .ll-btn-support { background: var(--ll-gold); } .ll-btn-support:hover { background: var(--ll-gold-hi); opacity: 1; } /* Passkey failure hint on the login page. */ .ll-passkey-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ll-ink-dim); text-align: center; } /* ---------- reset-password page ---------- */ .ll-lead { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--ll-ink-dim); } /* [SSO HUB 2026-08-09 r6] Centered reset-password header (heading + lead + lock badge) so it looks intentional and modern, not left-aligned. */ .ll-reset-head { text-align: center; margin-bottom: 20px; } .ll-reset-head .ll-title { font-size: 21px; margin-bottom: 8px; } .ll-reset-head .ll-lead { margin-bottom: 0; } /* Icon buttons (envelope / phone) reuse the primary + a new outline variant. */ .ll-btn-ico { display: flex; align-items: center; justify-content: center; gap: 9px; } .ll-btn-ico svg { width: 17px; height: 17px; flex: 0 0 auto; } .ll-btn-outline { width: 100%; padding: 11px 16px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ll-green); background: #fff; border: 1.5px solid var(--ll-green); border-radius: var(--ll-radius); cursor: pointer; transition: background .15s ease, color .15s ease; } .ll-btn-outline:hover { background: var(--ll-green); color: #fff; } .ll-or { display: flex; align-items: center; text-align: center; color: #9aa0a0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 16px 0; } .ll-or::before, .ll-or::after { content: ""; flex: 1; height: 1px; background: #d7dcdc; } .ll-or span { padding: 0 12px; } /* "Check your email" confirmation state. */ .ll-note-ok { text-align: center; } .ll-note-ico { width: 54px; height: 54px; border-radius: 50%; background: rgba(6, 89, 34, 0.10); color: var(--ll-green); display: flex; align-items: center; justify-content: center; margin: 4px auto 16px; } .ll-note-ico svg { width: 27px; height: 27px; } /* ---------- alerts ---------- */ .ll-alert { margin-bottom: 16px; padding: 11px 14px; border-radius: var(--ll-radius); font-size: 13.5px; line-height: 1.45; } .ll-alert-error { background: #fdecea; border: 1px solid #f5c2bd; color: #8a1c12; } .ll-alert-warn { background: #fff7e6; border: 1px solid #f3dca6; color: #7a5600; } /* ---------- headings + hints on inner pages ---------- */ .ll-title { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--ll-ink); } .ll-hint { margin-top: 10px; font-size: 12.5px; color: var(--ll-ink-dim); } .ll-welcome { text-align: center; } .ll-welcome h1 { margin: 0 0 12px; font-size: 22px; color: var(--ll-ink); } .ll-welcome p { color: var(--ll-ink-dim); } .ll-help-actions { margin-top: 18px; } .ll-help-actions-center { text-align: center; } .ll-help-actions .ll-btn-alt { display: inline-flex; flex: 0 0 auto; min-width: 200px; } /* Links list (SSP loginpage_links). */ .ll-links { list-style: none; padding: 0; margin: 16px 0 0; text-align: center; } .ll-links li { display: inline-block; margin: 0 8px; } /* ---------- footer (matches leadlocate.com/login exactly) ---------- */ /* [SSO HUB 2026-08-09 r8] Positioned exactly like the CRM login footer (.login_footer in theme.css): fixed to the bottom of the viewport, full width, centered, 10px 0 padding, no background. */ /* [PROFILE-LAYOUT 2026-08-10] The footer sits in normal flow as the last flex child of the page body: on short screens (login, reset) it lands at the bottom edge exactly as before, and on tall pages (the profile) it follows the content instead of floating fixed over it. */ .ll-foot { flex-shrink: 0; width: 100%; text-align: center; padding: 14px 0 12px; color: lightgray; font-size: 13px; line-height: 1.6; } .ll-copy { font-weight: normal; } .ll-foot a { color: lightgray; text-decoration: none; } .ll-foot a:hover { text-decoration: none; } .ll-foot-sep { margin: 0 4px; } /* [SSO HUB 2026-08-09 r7] 16px inputs on phones so iOS Safari does not zoom in on focus (the same reason the CRM login bumps its inputs on mobile). */ @media (max-width: 767px) { .ll-form input[type="text"], .ll-form input[type="password"], .ll-form input[type="email"], .ll-field input[type="text"], .ll-field input[type="password"], .ll-field input[type="email"], .ll-select { font-size: 16px; } .ll-main { padding: 28px 16px; } } @media (max-width: 460px) { .ll-actions { flex-direction: column; } } /* -------------------------------------------------------------------------- [UNIFIED-CARD 2026-08-10] One login card across every LeadLocate property (owner directive). Applies to the sign-in page and the whole reset flow. Appended last on purpose: equal-specificity rules resolve to these. CSP note: this file is the only stylesheet; nothing here may move inline. -------------------------------------------------------------------------- */ :root { --ll-card-w: 430px; } .ll-panel { border-radius: 24px; position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(243, 246, 244, 0.93) 100%); border: 1px solid rgba(6, 89, 34, 0.15); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); box-shadow: 0 40px 90px -28px rgba(10, 30, 16, 0.50), 0 12px 34px -14px rgba(10, 30, 16, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.65); } .ll-panel-head { background: transparent; border-bottom: 0; padding: 24px 32px 4px; } .ll-panel-body { padding: 14px 32px 24px; } .ll-form input[type="text"], .ll-form input[type="password"], .ll-form input[type="email"], .ll-field input[type="text"], .ll-field input[type="password"], .ll-field input[type="email"], .ll-select { font-size: 17px; font-size-adjust: 0.545; height: 48px; padding: 12px 15px; border-radius: 12px; border: 1px solid rgba(6, 89, 34, 0.20); background: rgba(255, 255, 255, 0.88); } .ll-form input[type="text"]:focus, .ll-form input[type="password"]:focus, .ll-form input[type="email"]:focus, .ll-field input[type="text"]:focus, .ll-field input[type="password"]:focus, .ll-field input[type="email"]:focus, .ll-select:focus { border-color: rgba(6, 89, 34, 0.60); box-shadow: 0 0 0 4px rgba(6, 89, 34, 0.14); } .ll-btn-login { position: relative; overflow: hidden; border-radius: 12px; font-size: 16px; font-weight: 700; padding: 11px 16px; background: linear-gradient(135deg, #0a7a34 0%, #065922 100%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 14px 30px -12px rgba(6, 89, 34, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.25s ease, background 0.25s ease; } .ll-btn-login::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-18deg); transition: left 0.75s cubic-bezier(0.2, 0.8, 0.25, 1); pointer-events: none; } .ll-btn-login:hover::after { left: 125%; } .ll-btn-login:hover { transform: translateY(-2px); background: linear-gradient(135deg, #0d8a3c 0%, #076b28 100%); box-shadow: 0 20px 40px -14px rgba(6, 89, 34, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .ll-btn-login:active { transform: translateY(0); } .ll-btn-outline { position: relative; overflow: hidden; border-radius: 12px; border-width: 1.5px; border-color: rgba(6, 89, 34, 0.45); font-size: 16px; font-weight: 700; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.25s ease, background .25s ease, color .25s ease, border-color .25s ease; } .ll-btn-outline::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-18deg); transition: left 0.75s cubic-bezier(0.2, 0.8, 0.25, 1); pointer-events: none; } .ll-btn-outline:hover::after { left: 125%; } .ll-btn-outline:hover { transform: translateY(-2px); background: linear-gradient(135deg, #0a7a34 0%, #065922 100%); color: #fff; border-color: transparent; box-shadow: 0 20px 40px -14px rgba(6, 89, 34, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .ll-btn-outline:active { transform: translateY(0); } .ll-or { margin: 12px 0; } .ll-or::before, .ll-or::after { background: rgba(6, 89, 34, 0.16); } .ll-foot { color: rgba(255, 255, 255, 0.38); text-shadow: none; } .ll-foot a { color: rgba(255, 255, 255, 0.38); } .ll-foot a:hover { color: rgba(255, 255, 255, 0.75); } /* Footer wears the same treatment as every other sign-in page. */ .ll-foot { font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.055em; } @media (max-width: 767px) { .ll-form input[type="text"], .ll-form input[type="password"], .ll-form input[type="email"], .ll-field input[type="text"], .ll-field input[type="password"], .ll-field input[type="email"] { font-size: 18px; } .ll-panel-head { padding-left: 20px; padding-right: 20px; } .ll-panel-body { padding-left: 20px; padding-right: 20px; } } @media (prefers-reduced-motion: reduce) { .ll-btn-login, .ll-btn-outline { transition: none; } .ll-btn-login:hover, .ll-btn-outline:hover { transform: none; } } /* [PROFILE-OTP 2026-08-10] Quiet text-link actions on the verification gate: resend / switch delivery / sign out read as choices, not as a second row of buttons competing with Continue. */ .ll-linkrow { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 18px; } .ll-linkrow form { margin: 0; } .ll-linkbtn { display: inline-block; padding: 6px 2px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #065922; text-decoration: none; } .ll-linkbtn:hover { text-decoration: underline; color: #0a7a34; } /* [PROFILE-LAYOUT 2026-08-10 r2] The profile as ONE module: a single panel whose three sections share hairline dividers - side by side on desktop, stacked on phones. body.ll-wide widens the stage only on pages that opt in; every other hub page keeps the narrow login-card stage. */ body.ll-wide .ll-stage { max-width: 1080px; } .ll-profile .ll-panel.ll-profile-panel { width: 100%; max-width: none; margin: 0; } .ll-profile-panel .ll-panel-head { padding-bottom: 14px; } .ll-profile-id { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 18px; padding: 12px 20px 13px; border-bottom: 1px solid #e4e7e7; background: #fff; font-size: 14px; } .ll-profile-alerts { padding: 16px 20px 0; } .ll-profile-alerts .ll-alert { margin: 0 0 4px; } .ll-sections { display: grid; grid-template-columns: 1fr; } .ll-section { padding: 20px 22px 24px; } .ll-section + .ll-section { border-top: 1px solid #dfe3e3; } @media (min-width: 940px) { .ll-sections { grid-template-columns: 1fr 1fr 1fr; } .ll-section + .ll-section { border-top: 0; border-left: 1px solid #dfe3e3; } } .ll-card-title { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #dfe3e3; font-size: 16px; font-weight: 700; color: var(--ll-ink); } .ll-pk-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ll-pk-label { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* [PASSKEY-CREATE-CTA 2026-08-10] The "Create a passkey for this device" button on the sign-in page and the pulse that walks the person to Add a passkey after the #addpasskey deep link. */ .ll-pk-create { display: block; width: 100%; margin-top: 12px; text-align: center; box-sizing: border-box; text-decoration: none; } .ll-pk-create[hidden] { display: none; } @keyframes llPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(8, 117, 45, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(8, 117, 45, 0); } } .ll-pulse { animation: llPulse 1.1s ease-out 4; } @media (prefers-reduced-motion: reduce) { .ll-pulse { animation: none; } } /* -------------------------------------------------------------------------- [PROFILE-REDESIGN 2026-08-10] Profile page round 3 (owner feedback): visible field labels, locked email, collapsed password form, passkey counter, license notice, and the tall-page background fix. -------------------------------------------------------------------------- */ /* Tall-page background: the login photo used to sit on the body, and a body background sizes to the DOCUMENT - on the tall profile page the photo stretched, got cut off, and scrolled away leaving bare canvas at the bottom. On wide (tall) pages the photo now lives on a fixed viewport layer instead: it always fills the screen, never scrolls, never stretches. The body keeps only the neutral fallback, which also propagates to the canvas behind collapsing phone browser chrome. The height is viewport-keyed (lvh where supported) so the strip behind collapsing chrome stays covered. Login and reset pages are short and keep their original body photo untouched. */ body.ll-page.ll-wide { background: #dbe1e0; } body.ll-page.ll-wide::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; background: #dbe1e0 url("../img/login_bg.jpg") center center / cover no-repeat; } /* Visible field labels: the profile is a settings page, so fields carry small labels like the CRM Edit User form instead of placeholder-only. */ .ll-label { display: block; margin: 0 0 6px 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--ll-ink-dim); } /* The permanent sign-in email: visibly locked, not editable. */ .ll-field input[type="text"].ll-input-locked, .ll-form input[type="text"].ll-input-locked { background: #eef0f0; color: #7d8585; border-color: #d9dede; cursor: default; } .ll-field input[type="text"].ll-input-locked:focus, .ll-form input[type="text"].ll-input-locked:focus { border-color: #d9dede; box-shadow: none; } .ll-hint-tight { margin-top: 6px; } .ll-hint-lead { margin: 0 0 14px; } /* Collapsed password form: a native details element styled so the closed state reads as one clean outlined button. No script involved. */ .ll-reveal { margin: 0; } .ll-reveal-btn { list-style: none; display: flex; align-items: center; justify-content: center; width: 100%; padding: 11px 16px; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ll-green); background: #fff; border: 1.5px solid rgba(6, 89, 34, 0.45); border-radius: 12px; cursor: pointer; user-select: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .ll-reveal-btn::-webkit-details-marker { display: none; } .ll-reveal-btn::marker { content: ""; } .ll-reveal-btn:hover { background: var(--ll-green); color: #fff; border-color: transparent; } .ll-reveal[open] .ll-reveal-btn { background: #eef4f0; color: var(--ll-ink-dim); border-color: #d9dede; font-size: 13.5px; font-weight: 600; padding: 8px 14px; } .ll-reveal[open] .ll-reveal-btn:hover { background: #e4ebe6; } .ll-reveal-body { margin-top: 14px; } /* Passkey counter chip next to the section title. */ .ll-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ll-count { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: rgba(6, 89, 34, 0.10); color: var(--ll-green); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } /* License notice: one sign-in does not mean a license for every app. */ .ll-license-note { margin: 0; padding: 20px 26px 22px; border-top: 1px solid #dfe3e3; background: rgba(255, 255, 255, 0.55); border-radius: 0 0 24px 24px; } .ll-license-title { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--ll-ink); } .ll-license-note p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ll-ink-dim); } .ll-license-note p:last-child { margin-bottom: 0; } .ll-license-links a { font-weight: 600; } /* Phone polish: comfortable edge padding and full-round corners kept. */ @media (max-width: 767px) { body.ll-wide .ll-main { padding: 20px 12px 26px; } .ll-profile-panel .ll-panel-head { padding-top: 20px; } .ll-license-note { padding: 18px 20px 20px; } } /* [FIRST-LOGIN-FUNNEL 2026-08-10] Welcome alert for brand-new sign-ins. */ .ll-alert-info { background: #e8f3ec; border: 1px solid #bcd9c6; color: #1f4d31; } /* -------------------------------------------------------------------------- [PROFILE-V3 2026-08-10] Desktop profile rebuilt as a settings page (owner): the license explainer leads the panel as an intro band, and each section is a full-width row with title + description in a left rail and controls on the right. Phones keep the previous stacked look, and the license block drops back to the bottom there via a flex order swap. Appended last on purpose: equal-specificity rules resolve to these. -------------------------------------------------------------------------- */ .ll-profile-panel { display: flex; flex-direction: column; } .ll-sec-hint { margin: 0 0 14px; } /* Phones (below the desktop breakpoint): previous look preserved. The license block moves to the end of the panel and its links move after the paragraphs, exactly where they were before the rebuild. */ @media (max-width: 939px) { .ll-license-note { display: flex; flex-direction: column; order: 9; } .ll-license-side { display: contents; } .ll-license-side .ll-license-links { order: 9; margin-bottom: 0; } } @media (min-width: 940px) { body.ll-wide .ll-stage { max-width: 920px; } /* the intro band */ .ll-license-note { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 6px 44px; padding: 26px 38px; border-top: 0; border-bottom: 1px solid #dfe3e3; border-radius: 0; background: rgba(6, 89, 34, 0.05); } .ll-license-title { font-size: 17px; margin: 0 0 10px; } .ll-license-note p { font-size: 12.5px; margin-bottom: 9px; } .ll-license-side .ll-license-links { margin: 0; font-size: 12.5px; } /* sections become full-width labeled rows */ .ll-sections { display: block; } .ll-section { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 6px 44px; padding: 30px 38px 32px; } .ll-section + .ll-section { border-left: 0; border-top: 1px solid #dfe3e3; } .ll-section .ll-card-title { border-bottom: 0; padding-bottom: 0; margin: 0 0 10px; font-size: 17px; justify-content: flex-start; gap: 10px; } .ll-sec-hint { margin: 0; font-size: 12.5px; line-height: 1.6; } .ll-sec-body { max-width: 470px; } .ll-sec-body > .ll-form > .ll-field:first-child { margin-top: 0; } }