/* Loyalty Portal front-end styles - deliberately light-touch so it layers cleanly on top of whatever theme/Elementor page it's placed on. Swap the variables below to match final branding. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap'); :root { /* EBCG rebrand, third pass - replaces the first two passes' guesses (ebcg.com's own site colors, then a hand-tuned navy/indigo/yellow system) with Kat's actual design manual: exact hex values, an explicit "gold = value/action/recognition, navy = structure, white = content" usage rule, and a warmer, more restrained executive-club feel rather than a SaaS-dashboard one. Variable names below still say "gold"/"dark"/"cream" from the very first Levera version - kept as-is rather than renamed sitewide (every template class name would need touching for zero visual difference), but the values now ARE exactly the manual's Gold/Deep Navy/Champagne. --llp-yellow from the previous pass is gone entirely: the manual's single gold accent already covers both "value" (credit amounts, badges) and "action" (links, CTAs) roles at once, so the earlier blue/yellow split was solving a problem that doesn't exist once gold is an actual gold. */ --llp-cream: #F5EBD2; /* champagne - tags/badges/selected filters/subtle highlights */ --llp-dark: #071C36; /* EBCG deep navy - structure, headings, primary buttons */ --llp-navy-2: #123B68; /* secondary navy - hover states, secondary panels, gradients */ --llp-gold: #D6A52E; /* EBCG gold - value/action/recognition ONLY, not a background */ --llp-gold-ink: #9A7217; /* darker gold, for gold text/labels that need to read on white */ --llp-border: #E5E7EB; /* Sidebar matches the manual's own worked example - deep navy panel, #163A62 active-item fill, gold left indicator. */ --llp-sidebar: #071C36; --llp-sidebar-active: #163A62; /* Warm white main canvas (manual's "Background") - notably not pure white, which is what pushes the whole app toward "premium" instead of "generic SaaS." --llp-cream (champagne) stays reserved for small accents (tags, badges, highlights), never a full-page background. */ --llp-canvas: #FAFAF8; --llp-heading: #10233A; --llp-body: #657284; --llp-muted: #98A1AC; /* Kept as an alias of --llp-heading - many existing rules reference --llp-ink for "text inside the app shell"; same color, one fewer value to keep in sync. */ --llp-ink: #10233A; --llp-dark-tint-05: rgba(7,28,54,0.05); --llp-dark-tint-12: rgba(7,28,54,0.12); --llp-success: #2F7D5B; --llp-warning: #C98A22; --llp-error: #B94A48; } /* Widened from 900px - on a wide viewport the content column was leaving a noticeably empty right-hand gutter next to the sidebar (flagged directly in the manual's layout section). 1200px lets the credit-row/conference grid breathe into an extra column instead of just adding side-margin. */ .llp-settings-form, .llp-dashboard { max-width: 1200px; margin: 0 auto; font-family: inherit; } /* Split-screen auth layout: form on the left, branding/photo panel on the right. Wraps whatever the theme/Elementor page already provides - this deliberately breaks out of the theme's normal content width so it can go edge-to-edge, and fills the full browser window (see the .llp-auth-fullscreen body rules below, which strip away the theme's header/title/footer on these two pages only). */ .llp-auth-page { display: grid; grid-template-columns: 40% 60%; min-height: 100vh; margin: 0 calc(50% - 50vw); /* full-bleed regardless of theme content width */ } .llp-auth-page.llp-auth-page-wide { grid-template-columns: 45% 55%; } @media (max-width: 900px) { .llp-auth-page { grid-template-columns: 1fr; min-height: 100vh; } .llp-auth-right { display: none; } /* keep it simple on small screens */ } /* Hide the theme's chrome: added to automatically (see LLP_Shortcodes:: maybe_add_fullscreen_class) on every portal page - Log In, Register, Dashboard, My Profile. Hides the theme's header, the page title WordPress prints automatically, and the footer, and removes their wrapper's padding, so the plugin's own layout (the auth split-screen, or the app shell/sidebar further below) is all that's visible - no "My Blog" menu, no WooCommerce Shop/Cart links, nothing that doesn't belong in a private members' portal. Selectors cover both block themes (e.g. Twenty Twenty-Five) and common classic-theme markup; harmless no-ops on themes that don't use them. */ body.llp-hide-theme-chrome { margin: 0; } body.llp-hide-theme-chrome .wp-site-blocks > header, body.llp-hide-theme-chrome .wp-site-blocks > footer, body.llp-hide-theme-chrome header.wp-block-template-part, body.llp-hide-theme-chrome footer.wp-block-template-part, body.llp-hide-theme-chrome header#masthead, body.llp-hide-theme-chrome footer#colophon, body.llp-hide-theme-chrome h1.wp-block-post-title, body.llp-hide-theme-chrome .entry-title, body.llp-hide-theme-chrome .entry-header, body.llp-hide-theme-chrome .page-header { display: none !important; } body.llp-hide-theme-chrome .wp-site-blocks, body.llp-hide-theme-chrome .wp-site-blocks > main, body.llp-hide-theme-chrome .entry-content, body.llp-hide-theme-chrome .wp-block-post-content, body.llp-hide-theme-chrome #content, body.llp-hide-theme-chrome #primary, body.llp-hide-theme-chrome main { margin: 0 !important; padding: 0 !important; max-width: none !important; } /* Log In / Register additionally go true full-screen (position: fixed, filling the entire window) - they're a single form with nothing else to navigate to, so there's no reason not to use the whole screen for them. Belt-and-braces: some themes nest the page content inside several layers of width-constrained wrapper divs (block-theme "Group" blocks, container divs, etc.), and the negative-margin bleed trick on .llp-auth-page can't reach through all of them. Pinning the panel directly to the viewport with `fixed` sidesteps that entirely - it no longer matters how many wrappers it sits inside, it always covers the full window on any screen size. */ body.llp-auth-fullscreen { overflow: hidden; /* the fixed panel below handles its own scrolling */ } body.llp-auth-fullscreen .llp-auth-page { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; z-index: 9999; } /* App shell: Dashboard and My Profile use this instead - a dark sidebar for navigation (logo, Dashboard, My Profile, Log out) alongside the scrollable content area, rather than a single full-screen form. Plain flexbox rather than position:fixed, so the sidebar naturally stretches to match however tall the page's content is, and long pages just scroll normally. fullscreen-reparent.php moves this to be a direct child of (same containing-block problem, and same fix, as the auth panel above) - once there, the negative-margin bleed trick is unnecessary and would actually introduce a slight horizontal scrollbar (viewport width vs body's content width differ by the scrollbar's own size), so it's zeroed out below. */ .llp-app-shell { display: flex; align-items: stretch; min-height: 100vh; margin: 0 calc(50% - 50vw); /* fallback full-bleed if JS reparenting can't run */ /* Clean sans throughout the app shell (Dashboard/News/My Profile/People/ Team) for the fresher v4 look - scoped here rather than on body so the Log In/Register pages keep inheriting the theme's own font, same as before. */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--llp-body); } body.llp-hide-theme-chrome .llp-app-shell { margin: 0; } /* Manrope for headings/titles/big numbers, Inter everywhere else - the manual calls for a "modern grotesk" on headings specifically so the page feels considered rather than every weight of the same font doing every job. Confident, not playful: -0.01em tracking reads tighter/more composed than Inter's own default heading metrics. */ .llp-app-shell h1, .llp-app-shell h2, .llp-app-shell h3, .llp-welcome-name, .llp-card-title, .llp-page-title, .llp-credit-amount, .llp-rank-gauge-value, .llp-wl-progress-count-num, .llp-wl-rank-gauge-tier, .llp-brand-lockup .llp-brand-name, .llp-wl-detail-body h3, .llp-spk-detail-header h3 { font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -0.01em; } .llp-app-sidebar { flex: 0 0 264px; background: var(--llp-sidebar); padding: 36px 24px 28px; position: relative; /* positioning context for .llp-sidebar-arc */ overflow: hidden; } .llp-app-sidebar-inner { position: sticky; top: 32px; display: flex; flex-direction: column; /* Tall enough to reach the bottom of the viewport (minus the sticky offset above and the sidebar's own vertical padding) so the "Account" section below can be pinned to the bottom via margin-top:auto rather than just trailing wherever the nav content happens to end. */ min-height: calc(100vh - 64px); } .llp-app-main { flex: 1; min-width: 0; padding: 40px 48px; background: var(--llp-canvas); } @media (max-width: 900px) { .llp-app-shell { flex-direction: column; } .llp-app-sidebar { flex: 0 0 auto; } /* The sidebar stacks above the page content here instead of sitting beside it, so the bottom-pinning above (min-height: calc(100vh - 64px) + margin-top: auto on the last section) would just force a viewport's worth of empty space before "Account" - drop both and let the nav's sections stack naturally, same as before that was added. */ .llp-app-sidebar-inner { position: static; min-height: 0; } .llp-app-nav { flex: none; } .llp-nav-section:last-child { margin-top: 0; } .llp-app-main { padding: 32px 24px; } } /* Brand lockup, but readable on the dark sidebar instead of the cream panel - small uppercase treatment rather than the larger auth-page lockup, since the sidebar is a much narrower column. Scoped to .llp-app-sidebar so the auth pages' own brand lockup (still the larger, non-uppercase style) is untouched. */ .llp-app-sidebar .llp-brand-lockup { margin-bottom: 40px; } /* Same specificity (2 class selectors) as .llp-brand-lockup .llp-brand-name below, which sets color: var(--llp-dark) for the auth-page lockup - with --llp-dark and --llp-sidebar now the same navy, a source-order tie here made this text invisible (navy on navy). Matching the 3-class selector used by the very next rule (for size/weight) instead of a 2-class one fixes the tie for good rather than depending on which rule happens to be declared later in the file. */ .llp-on-dark .llp-brand-lockup .llp-brand-name { color: var(--llp-cream); } .llp-on-dark .llp-brand-lockup .llp-brand-name { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.35; } .llp-on-dark .llp-brand-tagline { color: rgba(245,235,210,0.65); } .llp-on-dark .llp-brand-lockup .llp-brand-tagline { font-size: 11px; letter-spacing: 0.02em; color: rgba(245,235,210,0.55); margin-top: 6px; } .llp-on-dark .llp-brand-bar { background: var(--llp-gold); } .llp-app-nav { margin-top: 48px; display: flex; flex-direction: column; gap: 22px; flex: 1; /* fills the rest of .llp-app-sidebar-inner so the last section can be pinned to the bottom below */ } /* Small labeled groups (Content / Admin / Account) rather than one long flat list of links - see templates/partials/app-sidebar.php's docblock. Each section's own links keep the original tight 2px stacking; the visual separation comes from the gap between .llp-nav-section blocks above. The last section is always "Account" (My Profile / Log out) regardless of whether "Admin" rendered before it, so pinning it to the bottom of the sidebar via :last-child + margin-top:auto - rather than just letting it trail after Admin - keeps sign-out/profile links in a stable, predictable spot instead of drifting depending on how many links are above them. */ .llp-nav-section { display: flex; flex-direction: column; gap: 2px; } .llp-nav-section:last-child { margin-top: auto; } .llp-nav-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.38); font-weight: 700; padding: 0 12px 6px; } .llp-app-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-left: 2px solid transparent; border-radius: 10px; color: rgba(255,255,255,0.72); text-decoration: none; font-weight: 500; font-size: 13px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .llp-app-nav-link:hover { background: rgba(18,59,104,0.45); color: #fff; } /* Manual's own worked example for this exact block: solid #163A62 fill (not a translucent tint) + gold left rule for "you are here." */ .llp-app-nav-link.is-active { background: var(--llp-sidebar-active); border-left-color: var(--llp-gold); color: #fff; font-weight: 600; } /* Small feather-style icon in front of each nav link's label (see templates/partials/app-sidebar.php) - gold per the manual's sidebar spec, at reduced opacity so it reads as a considered accent rather than "every icon is gold" (the thing the manual explicitly warns against elsewhere - card/badge icons stay navy, this is the one place gold icons are called out by name). */ .llp-nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; display: inline-flex; color: var(--llp-gold); } .llp-nav-icon svg { width: 16px; height: 16px; stroke-width: 1.6; } .llp-app-nav-link.is-active .llp-nav-icon, .llp-app-nav-link:hover .llp-nav-icon { opacity: 1; } /* Faint decorative arc sitting low in the sidebar, behind the nav - purely ambient texture, not interactive, so it's marked aria-hidden in the markup and pointer-events are disabled here as a second guard. */ .llp-sidebar-arc { position: absolute; left: -60px; bottom: 90px; width: 220px; height: 220px; opacity: 0.14; pointer-events: none; } /* The "buy your ticket" card that replaces the old fixed-threshold messaging on a member's Dashboard - one link per event they're interested in. */ .llp-ticket-card .llp-ticket-links { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .llp-auth-left { /* Warm-white canvas, not champagne - champagne is reserved for small accents (tags/badges/highlights) per the manual, not a full-panel background. */ background: var(--llp-canvas); padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; /* so a long registration form scrolls within its own panel */ max-height: 100vh; } .llp-auth-left-inner { max-width: 400px; margin: 0 auto; width: 100%; } .llp-auth-right { position: relative; /* Navy -> secondary navy only, no gold stop - the manual is explicit that gold shouldn't appear as a background/large fill, only as a small accent, so a big gradient panel is exactly where it shouldn't show up even faintly. */ background: linear-gradient(160deg, var(--llp-dark) 0%, var(--llp-navy-2) 100%); background-size: cover; background-position: center; } .llp-auth-right.llp-has-photo { background-image: var(--llp-auth-photo); } .llp-auth-right::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,28,54,0.55), rgba(7,28,54,0.05)); } .llp-brand-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 48px; } .llp-brand-lockup img { height: 44px; width: auto; } .llp-brand-lockup .llp-brand-bar { width: 3px; height: 36px; background: var(--llp-gold); } .llp-brand-lockup .llp-brand-name { font-size: 20px; font-weight: 700; color: var(--llp-dark); letter-spacing: 0.02em; } .llp-brand-lockup .llp-brand-tagline { font-size: 12px; color: #657284; line-height: 1.3; } .llp-auth-form h2 { font-size: 26px; margin-bottom: 24px; color: var(--llp-dark); } .llp-confirm-page { max-width: 720px; margin: 0 auto; font-family: inherit; } .llp-field { margin-bottom: 22px; } .llp-field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #657284; } .llp-field input[type="text"], .llp-field input[type="email"], .llp-field input[type="password"], .llp-field input[type="url"], .llp-field input[type="number"], .llp-field input[type="file"], .llp-field select, .llp-field textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--llp-border); border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--llp-dark); box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .llp-field input:focus, .llp-field select:focus, .llp-field textarea:focus { outline: none; border-color: var(--llp-dark); box-shadow: 0 0 0 3px var(--llp-dark-tint-12); } .llp-field input[disabled] { color: #657284; background: #fafaf7; } .llp-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 600px) { .llp-field-grid-2 { grid-template-columns: 1fr; } } .llp-checkbox-grid { border: none; padding: 0; margin-bottom: 16px; } .llp-checkbox-grid legend { font-weight: 600; margin-bottom: 8px; } /* Any plain native checkbox/radio in the plugin's own pages (most are custom-drawn tiles/chips elsewhere in this file, but a few plain ones remain, e.g. Registration's Notifications/Privacy Policy/Labels) picks up the gold accent instead of the browser/OS default blue, same reasoning as .llp-lb-mode-input below. Scoped to the plugin's own containers so this doesn't leak into the rest of the WordPress site. */ .llp-app-shell input[type="checkbox"], .llp-app-shell input[type="radio"], .llp-auth-page input[type="checkbox"], .llp-auth-page input[type="radio"], .llp-confirm-page input[type="checkbox"], .llp-confirm-page input[type="radio"] { accent-color: var(--llp-gold); } .llp-checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; margin-bottom: 8px; font-weight: normal; } /* .llp-field label above is styled as a small uppercase eyebrow (for labels sitting above a text input), but a checkbox's label wraps its own input AND its sentence-case description text - it needs to look like normal body copy, not a field eyebrow, even when it's nested inside a .llp-field wrapper (Notifications, Privacy Policy consent, Labels). Needs the extra specificity of "label.llp-checkbox" to win over ".llp-field label" above. */ .llp-field label.llp-checkbox { text-transform: none; letter-spacing: normal; font-size: 15px; color: inherit; font-weight: 400; margin-bottom: 0; } /* Chip-style selectable cards for event interests (My Profile, Registration) - a long vertical checkbox list reads as "settings page"; two-column pill cards with a checkmark indicator read as an intentional, premium choice. Keeps a real, keyboard-operable checkbox input (just visually hidden) so nothing about how the form submits changes - only how it looks. */ .llp-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } @media (max-width: 600px) { .llp-chip-grid { grid-template-columns: 1fr; } } .llp-chip { position: relative; display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--llp-border); border-radius: 10px; padding: 14px 16px; background: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .llp-chip:hover { border-color: #CBD1DB; } .llp-chip-input { position: absolute; opacity: 0; width: 0; height: 0; } .llp-chip-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--llp-border); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; transition: background-color .15s ease, border-color .15s ease; } .llp-chip-dot::after { content: "\2713"; opacity: 0; transform: scale(0.6); transition: opacity .15s ease, transform .15s ease; } .llp-chip-label { font-weight: 500; color: var(--llp-dark); } .llp-chip:has( .llp-chip-input:checked ) { border-color: var(--llp-dark); background: var(--llp-dark-tint-05); } .llp-chip:has( .llp-chip-input:checked ) .llp-chip-dot { background: var(--llp-dark); border-color: var(--llp-dark); } .llp-chip:has( .llp-chip-input:checked ) .llp-chip-dot::after { opacity: 1; transform: scale(1); } .llp-chip:has( .llp-chip-input:focus-visible ) { outline: 2px solid var(--llp-gold); outline-offset: 2px; } .llp-btn { display: inline-block; padding: 12px 24px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: all 0.2s cubic-bezier(.4,0,.2,1); } .llp-btn-primary { background: var(--llp-dark); color: #fff; } .llp-btn-primary:hover { opacity: 0.92; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(7,28,54,0.4); } /* Secondary "Edit" action on view-mode cards (e.g. My Profile's Personal Information card) - the manual's own "Secondary" button spec: white/ transparent fill, gold border, dark-gold text (not full-brightness gold, which is too low-contrast to read as text on white). */ .llp-btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--llp-gold); color: var(--llp-gold-ink); font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; text-decoration: none; } .llp-btn-ghost:hover { border-color: var(--llp-gold-ink); background: var(--llp-cream); } .llp-btn-ghost svg { width: 13px; height: 13px; } .llp-form-footer { display: flex; justify-content: flex-end; margin-top: 8px; } .llp-notice { padding: 14px 16px; border-radius: 6px; margin-bottom: 20px; } .llp-notice-error { background: #fdecea; border: 1px solid #f5c2c0; color: var(--llp-error); } .llp-notice-error ul { margin: 0; padding-left: 20px; } .llp-notice-success { background: #eaf6ec; border: 1px solid #c3e6c8; color: var(--llp-success); } .llp-notice-warning { background: #fdf3e3; border: 1px solid #f0dba8; color: var(--llp-warning); } .llp-muted { color: #657284; font-size: 14px; } .llp-bold { font-weight: 700; } .llp-gold-link { color: var(--llp-gold); text-decoration: none; font-weight: 600; } .llp-gold-link:hover { text-decoration: underline; } /* Dashboard/My Profile page background is set directly on .llp-app-main above (var(--llp-canvas), near-white) - kept here only as a marker for where that decision lives, since previous versions of this file set it as a separate cream override at this point in the stylesheet. */ .llp-welcome-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 36px; gap: 16px; flex-wrap: wrap; } .llp-welcome-header .llp-eyebrow { margin-bottom: 6px; } .llp-welcome-name { font-size: 32px; font-weight: 700; margin: 0; color: var(--llp-ink); } .llp-page-subtitle { margin: 8px 0 0; color: #657284; font-size: 15px; } .llp-avatar-block { display: flex; align-items: center; gap: 12px; } .llp-avatar-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--llp-dark); color: var(--llp-gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; border: 1.5px solid var(--llp-gold); } /* A member's own uploaded photo, shown instead of .llp-avatar-circle wherever one's set (see LLP_Auth::profile_photo_url()) - same footprint so it drops into the same markup slot without any layout shift. */ .llp-avatar-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; } /* My Profile's photo upload row, above the name fields on the Personal Information card. */ .llp-photo-field { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; } .llp-photo-field .llp-avatar-circle, .llp-photo-field .llp-avatar-photo { flex-shrink: 0; } /* Generic premium card: soft shadow instead of a hard border, more interior air than the earlier flat/bordered boxes - this one visual change is most of what makes the whole portal read as "expensive" rather than a stock admin panel. Section headers inside a card (icon + title) use .llp-card-header/.llp-card-icon/.llp-card-title below. */ /* Near-zero-shadow + hairline border + hover-elevation reads closer to a premium SaaS dashboard than the earlier soft-shadow-only cards. */ .llp-card { background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; box-shadow: 0 4px 16px rgba(7,28,54,0.06); padding: 32px; margin-bottom: 32px; } .llp-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } /* Filter bar (People directory) - a compact row rather than the full .llp-field treatment used on My Profile, since these are quick narrow-it- down controls, not a form someone fills in carefully. */ .llp-filter-card { padding: 20px 24px; } .llp-filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .llp-filter-form input[type="search"], .llp-filter-form select { padding: 10px 14px; border: 1px solid var(--llp-border); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--llp-dark); box-sizing: border-box; } .llp-filter-form input[type="search"] { flex: 1 1 220px; min-width: 200px; } .llp-filter-form input:focus, .llp-filter-form select:focus { outline: none; border-color: var(--llp-dark); box-shadow: 0 0 0 3px var(--llp-dark-tint-12); } .llp-filter-form .llp-btn { padding: 10px 20px; } /* Pagination footer - shown under any filterable list. */ .llp-pagination { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 8px; } .llp-card-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--llp-cream); color: var(--llp-dark); display: flex; align-items: center; justify-content: center; } .llp-card-icon svg { width: 18px; height: 18px; } .llp-card-title { font-size: 16px; font-weight: 700; color: var(--llp-dark); margin: 0; } .llp-card-subtitle { font-size: 13px; color: #657284; margin: 2px 0 0; } /* Conference Credit + Watch & Learn Rank + "Ready to book" (v0.28.0) - all 3 shown together, always (see templates/dashboard.php's docblock), so this is a 3-up row on wide screens rather than the 2-up "credit-card-OR-rank- card plus ticket-card" layout it used to be. */ /* align-items: start (not the grid default of stretch) - Conference Credit and Your Rank have very different amounts of content (the Rank card's flower graphic makes it taller), so stretching would force the shorter card to grow and leave an ugly empty gap under its own content. Each card just sizes to its own content instead. */ .llp-credit-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 22px; margin-bottom: 32px; } @media (max-width: 980px) { .llp-credit-row { grid-template-columns: 1fr 1fr; } /* At 2 columns, 3 items leaves the 3rd (Ready to book) orphaned alone in column 1 with an empty gap beside it - span it across both columns instead so it reads as a clean full-width row under the two cards. */ .llp-credit-row > :nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 600px) { .llp-credit-row { grid-template-columns: 1fr; } } /* Soft light sheen top-right (a second, non-interactive background layer - the plain color in the final layer still works as this rule's background- color) so the navy card reads as a lit panel instead of a flat fill - same premium-glass touch used on .llp-conf-photo/.llp-auth-right below. */ .llp-credit-card { position: relative; background: radial-gradient(120% 140% at 100% -20%, rgba(255,255,255,0.10), transparent 55%), var(--llp-dark); color: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 16px 32px -14px rgba(0,17,85,0.30); } .llp-credit-card .llp-label { font-size: 12px; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 8px; } /* Yellow, not the interactive blue - this is the one number on the card meant to read as "the thing you've earned," not something to click. */ .llp-credit-card .llp-credit-amount { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; color: var(--llp-gold); margin-bottom: 6px; } .llp-credit-card .llp-muted { color: rgba(255,255,255,0.7); } /* Rank card (v0.19.0) - shown on the Dashboard alongside the Credit card, always (v0.28.0 - see class-llp-shortcodes.php render_dashboard()). Reuses .llp-credit-card's dark panel styling; .llp-rank-amount just shrinks the font since rank labels ("Engaged Learner") run much longer than a euro figure and would otherwise overflow the card at 34px. */ .llp-rank-card .llp-rank-amount { font-size: 22px; margin-bottom: 4px; } /* 6-petal "flower" rank-progress graphic (v0.29.0, replacing v0.22.0's Delta SkyMiles-style semi-donut gauge) - the EBCG logo's own pinwheel mark, per Kat's direct reference image: "the further you are, the more color will load up. Once you color it all, you move to next rank." Each petal is a single curved stroke (see LLP_Points::RANK_FLOWER_PETALS/ rank_flower_svg()) drawn twice - once as a static translucent "track" in its unfilled state, then again in its real brand color with stroke-dasharray/dashoffset revealing only as much of that petal's length as the member's progress through its 1/6 slice covers, so color visibly grows outward from the center as points come in. A petal's tip dot only switches to full color once that petal is completely filled. The big number + "pts" caption are plain HTML absolutely centered over the SVG (not SVG ) so they inherit the card's normal font stack - same approach the old gauge used, just centered on the flower's small clear hub instead of a donut hole. */ .llp-rank-card .llp-rank-amount { text-align: center; } .llp-rank-flower { position: relative; width: 190px; max-width: 100%; margin: 10px auto 0; } .llp-rank-flower-svg { width: 100%; height: auto; display: block; } .llp-rank-flower-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; pointer-events: none; } .llp-rank-gauge-value { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .llp-rank-gauge-unit { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .llp-rank-next-label { margin-top: 10px; font-size: 12px; text-align: center; } /* Small "!" note on a member's own credit balance - explains that credit is added manually after invoices are paid, and offers a way to flag a balance that looks wrong without needing to know who to email. Pure CSS+one-line-onclick toggle, no framework, consistent with the rest of this stylesheet's approach (see the news filter toggle). */ .llp-credit-info-btn { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; } .llp-credit-info-btn:hover { background: rgba(255,255,255,0.22); } .llp-credit-info-popover { display: none; position: absolute; top: 44px; right: 16px; z-index: 5; width: 260px; background: #fff; color: #10233A; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 16px; } .llp-credit-info-popover.is-open { display: block; } .llp-credit-info-popover p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; } .llp-credit-info-popover p:last-child { margin-bottom: 0; } .llp-credit-info-popover textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--llp-border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; margin-bottom: 8px; } .llp-credit-info-popover .llp-btn-link { font-size: 13px; } .llp-progress-card { background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; box-shadow: 0 4px 16px rgba(7,28,54,0.06); padding: 28px; transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s cubic-bezier(.4,0,.2,1); } .llp-progress-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(7,28,54,0.10); border-color: #CBD1DB; } .llp-section-header { display: flex; justify-content: space-between; align-items: center; margin: 40px 0 16px; } /* Small uppercase section/eyebrow label - kept at its original size/weight since this class is reused across many pages (People, Person detail, section headers), not just the ones covered by the v4 redesign; only the color shifts slightly to sit better on the new near-white canvas. */ .llp-eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #657284; } .llp-activity-list { background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; box-shadow: 0 4px 16px rgba(7,28,54,0.06); overflow: hidden; margin-bottom: 20px; } .llp-activity-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--llp-border); } .llp-activity-row:last-child { border-bottom: none; } .llp-activity-amount { font-weight: 700; color: var(--llp-gold); } /* Optional icon on a ledger entry (see LLP_Points::icon_options()) - set from the "Add / adjust points" form, shown next to the reason wherever a member's activity list appears. */ .llp-activity-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--llp-cream); color: var(--llp-dark); } .llp-activity-icon svg { width: 15px; height: 15px; } .llp-activity-footer { padding: 12px 18px; text-align: right; } .llp-status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .llp-status-pill.llp-approved, .llp-status-pill.llp-approved { background: #eaf6ec; color: var(--llp-success); } .llp-status-pill.llp-pending { background: #fdf3e3; color: #C98A22; } /* News feed - short posts (e.g. speaker announcements) for events matching the member's interests; see LLP_News / Loyalty Portal -> News. */ .llp-news-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .llp-news-item { background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; box-shadow: 0 4px 16px rgba(7,28,54,0.06); padding: 20px; } .llp-news-item p.llp-muted { margin: 6px 0; } /* Optional image, set from Loyalty Portal -> News / the front-end Post News page - sits above everything else on the card, edge-to-edge, pulled back out of the card's own padding. */ .llp-news-item-image { width: 100%; max-height: 220px; object-fit: cover; display: block; border-radius: 10px 10px 0 0; margin: -20px -20px 16px; width: calc(100% + 40px); } /* The body itself now comes from a rich-text editor - reset the default browser spacing on whatever block tags it produced (paragraphs/lists/ links) so it reads like the rest of the card instead of like pasted-in editor output. */ /* Editorial preview, not a full blog excerpt - clamp to 3 lines so the Dashboard's News card stays a glance, not a wall of text; the section's own "See more ->" link (rendered above the list) is still there for anyone who wants the rest. */ .llp-news-item-body { margin: 6px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .llp-news-item-body p { margin: 0 0 8px; } .llp-news-item-body p:last-child { margin-bottom: 0; } .llp-news-item-body ul, .llp-news-item-body ol { margin: 0 0 8px; padding-left: 20px; } .llp-news-item-body a { color: var(--llp-gold); } .llp-news-item-body img { max-width: 100%; border-radius: 8px; margin: 8px 0; } .llp-conf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .llp-conf-card { background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; box-shadow: 0 4px 16px rgba(7,28,54,0.06); overflow: hidden; transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s cubic-bezier(.4,0,.2,1); } .llp-conf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(7,28,54,0.10); border-color: #CBD1DB; } /* Soft light sheen top-left over the navy-to-indigo gradient - a plain two-stop diagonal read as a flat color block; this one small highlight layer is most of the difference between "CSS gradient" and "designed surface." */ /* Navy-to-secondary-navy, not navy-to-gold - the manual is explicit that gold shouldn't cover any real area of the screen, only appear as a small accent, so a card-header-sized gold fill was exactly backwards. Taller than before (100px -> 132px) to read closer to the manual's "~40% of the card, not a decorative strip" guidance. This is still a gradient placeholder, not photography - see the note sent with these screenshots about adding a real per-event image field for actual venue/speaker photos, which the plugin doesn't have yet. */ .llp-conf-photo { height: 132px; background: radial-gradient(130% 160% at 10% -20%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(135deg, var(--llp-dark), var(--llp-navy-2)); } .llp-conf-card-body { padding: 16px; } /* "Almost like a luxury hotel label," per the manual: white fill, a hairline champagne border instead of a filled champagne background, and a dark-gold ink rather than the card's ordinary navy/gray text. */ .llp-category-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: #fff; color: var(--llp-gold-ink); border: 1px solid var(--llp-cream); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; } .llp-gold-link-btn { display: inline-block; margin-top: 10px; color: var(--llp-gold); font-weight: 700; text-decoration: none; background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; } .llp-gold-link-btn.llp-pending { color: #C98A22; cursor: default; } /* Secondary "also see the public website" link shown alongside the agenda PDF once a request is approved (v0.24.0) - deliberately smaller/muted so the agenda PDF stays the primary CTA. */ .llp-secondary-link { display: block; margin-top: 6px; color: #657284; font-weight: 500; text-decoration: none; font-size: 12px; } .llp-secondary-link:hover { text-decoration: underline; } .llp-confirm-page { text-align: center; padding: 60px 20px; } .llp-profile-photo-preview img { border-radius: 50%; margin-bottom: 16px; } .llp-redeem-widget { background: var(--llp-cream); border: 1px solid var(--llp-border); border-radius: 14px; padding: 20px; margin-bottom: 24px; } .llp-redeem-balance { font-size: 16px; margin-bottom: 10px; } .llp-redeem-balance strong { color: var(--llp-dark); } .llp-redeem-row { display: flex; gap: 10px; margin: 8px 0; } .llp-redeem-row input[type="number"] { flex: 1; padding: 10px 12px; border: 1px solid var(--llp-border); border-radius: 6px; } .llp-btn-link { background: none; border: none; padding: 0; color: var(--llp-gold); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: 14px; } .llp-btn-link.llp-pending-text { color: #C98A22; text-decoration: none; cursor: default; } /* Agenda request/status row tucked under the ticket CTA in the Dashboard's "Ready to book?" card (v0.23.0) - same request/pending/view states as each card in the conference grid (partials/conferences-grid.php), just surfaced for the one nearest event too, so it doesn't take scrolling past everything else to get to. A thin top border separates it from the ticket button/date above rather than just stacking with no visual break. */ .llp-ticket-agenda-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(20,20,15,0.08); } /* Generic small eyebrow label, used inside white cards (People/Person detail) as well as the dark credit card above - .llp-credit-card overrides the opacity/color further where it sits on a dark background. */ .llp-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: #657284; margin-bottom: 8px; } /* Front-end People directory (see templates/people-directory.php) - reuses .llp-activity-list/.llp-activity-row but as clickable links through to a person's detail view. */ .llp-people-row { display: flex; color: inherit; text-decoration: none; cursor: pointer; } .llp-people-row:hover { background: var(--llp-cream); } /* Meet the Team page (templates/team.php) + the Dashboard's "your person" card (templates/dashboard.php) - both share the reach-out buttons block below via templates/partials/reach-out.php. Team cards are centered and photo-forward - a more editorial "about us" feel than the dense data-row look used elsewhere in the portal (People, Requests), which is the right fit here since this page is a handful of people, not a list to scan. */ .llp-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; } .llp-team-card { text-align: center; padding: 32px 28px; transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s cubic-bezier(.4,0,.2,1); } .llp-team-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(7,28,54,0.10); border-color: #CBD1DB; } .llp-team-card-header { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 4px; } .llp-team-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-bottom: 14px; border: 1.5px solid var(--llp-gold); } .llp-team-photo-fallback { width: 96px; height: 96px; font-size: 28px; margin-bottom: 14px; border: 1.5px solid var(--llp-gold); } .llp-team-role { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--llp-gold); margin-top: 2px; } .llp-team-card .llp-muted { max-width: 320px; margin-left: auto; margin-right: auto; } .llp-reachout-card { padding: 24px; } .llp-reachout-card .llp-team-card-header { flex-direction: row; align-items: center; text-align: left; } .llp-reachout-card .llp-team-photo, .llp-reachout-card .llp-team-photo-fallback { width: 56px; height: 56px; margin-bottom: 0; font-size: 18px; } .llp-reachout-card .llp-reachout-buttons { justify-content: flex-start; } /* Reach-out actions - a stripped-down icon + uppercase label, no pill/badge chrome, reading closer to Linear/Stripe-style quiet actions than the earlier filled-pill buttons. Hover is just a color shift (gold-ish), matching the rest of the v4 system's restrained hover treatment. */ .llp-reachout-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 16px; } .llp-reachout-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: none; background: none; color: var(--llp-ink); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color 0.15s ease; } .llp-reachout-btn:hover { background: none; color: var(--llp-gold); } .llp-reachout-icon { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border-radius: 0; background: none; color: inherit; flex-shrink: 0; } .llp-reachout-btn:hover .llp-reachout-icon { background: none; color: inherit; } .llp-reachout-icon svg { width: 15px; height: 15px; } /* Compact icon-only variant for tight spaces - e.g. the Meet the Team preview widget on My Profile, where full label+icon buttons would be too wide for a narrow sidebar card. Same markup (.llp-reachout-btn + .llp-reachout-label), the label is just visually hidden here. */ .llp-reachout-compact .llp-reachout-buttons { gap: 6px; justify-content: flex-start; } .llp-reachout-compact .llp-reachout-btn { width: 30px; height: 30px; border-radius: 8px; background: var(--llp-canvas); border: 1px solid rgba(20,20,15,0.08); display: inline-flex; align-items: center; justify-content: center; } .llp-reachout-compact .llp-reachout-btn:hover { background: var(--llp-dark); border-color: var(--llp-dark); } .llp-reachout-compact .llp-reachout-btn:hover svg { color: var(--llp-gold); } .llp-reachout-compact .llp-reachout-label { display: none; } .llp-reachout-compact .llp-reachout-icon svg { width: 14px; height: 14px; } /* The "Leave a quick message" form - deliberately its own distinct shape (an expanding panel, not a link) so it doesn't read as a second "Email" button - see the docblock in partials/reach-out.php for why. */ .llp-reachout-message-form { display: none; margin-top: 12px; padding: 14px; background: var(--llp-cream); border: 1px solid var(--llp-border); border-radius: 12px; } .llp-reachout-message-form.is-open { display: block; } .llp-reachout-message-form p { margin: 0 0 10px; font-size: 13px; } .llp-reachout-message-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--llp-border); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical; margin-bottom: 10px; } .llp-reachout-message-form .llp-btn { padding: 8px 18px; font-size: 13px; } /* =================================================================== v4 visual system - structural classes new to this round: view/edit Personal Information card, row-style Events of Interest, tile-style Notifications checkboxes, the slim top bar, and My Profile's two-column layout with a compact Meet the Team preview. Grouped here since they're genuinely new markup, not overrides of something that existed before. =================================================================== */ /* ---- View-then-edit field display (My Profile's "Personal Information" card) - a static label/value pair instead of a live input, editable only after pressing the card's Edit button. The underlying
and its inputs stay in the DOM either way; only their visibility toggles (see settings-form.php's inline script), so llp_update_profile's submission handling is unaffected. ---- */ .llp-view-field { margin-bottom: 22px; } .llp-view-field-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #657284; font-weight: 600; margin-bottom: 5px; } .llp-view-field-value { font-size: 15px; font-weight: 600; color: var(--llp-ink); } .llp-view-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 600px) { .llp-view-field-grid { grid-template-columns: 1fr; } } .llp-view-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .llp-view-card-header .llp-card-header { margin-bottom: 0; } .llp-view-field-linkedin { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .llp-view-field-linkedin .llp-btn-icon-only { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--llp-dark); color: var(--llp-gold); display: flex; align-items: center; justify-content: center; border: none; } .llp-view-field-linkedin .llp-btn-icon-only svg { width: 15px; height: 15px; } /* ---- Events of Interest as a selectable row list instead of the chip grid used elsewhere (Registration) - a filled check-circle + tinted row when selected. Still a real checkbox input under the hood (just visually hidden), same interests[] submission as before. ---- */ .llp-select-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 8px; border: 1px solid rgba(20,20,15,0.09); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--llp-ink); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .llp-select-row-input { position: absolute; opacity: 0; width: 0; height: 0; } .llp-select-row:has( .llp-select-row-input:checked ) { background: rgba(0,17,85,0.045); border-color: rgba(0,17,85,0.22); } .llp-select-row:has( .llp-select-row-input:focus-visible ) { outline: 2px solid var(--llp-gold); outline-offset: 2px; } .llp-select-row-check { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid rgba(20,20,15,0.18); display: flex; align-items: center; justify-content: center; transition: background-color .15s ease, border-color .15s ease; } .llp-select-row:has( .llp-select-row-input:checked ) .llp-select-row-check { background: var(--llp-dark); border-color: var(--llp-dark); color: #fff; } .llp-select-row-check svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.6); transition: opacity .15s ease, transform .15s ease; } .llp-select-row:has( .llp-select-row-input:checked ) .llp-select-row-check svg { opacity: 1; transform: scale(1); } /* ---- Notification checkboxes: square check tile instead of the default browser checkbox, filled dark-green + white tick when on. Same idea as .llp-select-row above - a real checkbox input, just visually hidden. ---- */ .llp-check-row { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 13px; color: #657284; line-height: 1.5; cursor: pointer; } .llp-check-row:last-child { margin-bottom: 0; } .llp-check-row-input { position: absolute; opacity: 0; width: 0; height: 0; } .llp-check-tile { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 1px; border: 1.5px solid rgba(20,20,15,0.18); display: flex; align-items: center; justify-content: center; transition: background-color .15s ease, border-color .15s ease; } .llp-check-row:has( .llp-check-row-input:checked ) .llp-check-tile { background: var(--llp-dark); border-color: var(--llp-dark); } .llp-check-tile svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .15s ease; } .llp-check-row:has( .llp-check-row-input:checked ) .llp-check-tile svg { opacity: 1; } /* ---- Slim top bar (avatar + name, linking through to My Profile) so page content no longer needs to repeat that block at the top of every single page. Deliberately no notification bell - the portal doesn't have a notifications feature yet, and adding the icon here would imply one. ---- */ .llp-app-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 20px 48px 0; } .llp-topbar-user { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .llp-topbar-user .llp-avatar-circle, .llp-topbar-user .llp-avatar-photo { width: 32px; height: 32px; font-size: 12px; } .llp-topbar-user-name { font-size: 13px; font-weight: 600; color: var(--llp-ink); } .llp-topbar-chevron { width: 14px; height: 14px; color: #98A1AC; flex-shrink: 0; } /* ---- My Profile: two-column layout (wide left, narrow right), the left column stacking a view-mode Personal Information card above a compact Meet-the-Team preview. ---- */ .llp-profile-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 24px; align-items: start; } @media (max-width: 900px) { .llp-profile-grid { grid-template-columns: 1fr; } } .llp-profile-grid .llp-card { margin-bottom: 24px; } .llp-profile-grid .llp-card:last-child { margin-bottom: 0; } .llp-team-preview-row { display: flex; gap: 18px; } .llp-team-preview-item { flex: 1; text-align: left; } .llp-team-preview-photo { width: 52px; height: 52px; border-radius: 50%; margin-bottom: 10px; border: 1.5px solid var(--llp-gold); object-fit: cover; display: block; } .llp-team-preview-photo-fallback { width: 52px; height: 52px; border-radius: 50%; margin-bottom: 10px; border: 1.5px solid var(--llp-gold); font-size: 16px; } .llp-team-preview-name { font-size: 13px; font-weight: 700; color: var(--llp-ink); margin-bottom: 2px; } .llp-team-preview-role { font-size: 11px; font-weight: 600; color: var(--llp-gold); margin-bottom: 12px; } .llp-pagination-dots { display: flex; gap: 6px; justify-content: center; margin-top: 22px; } .llp-pagination-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,20,15,0.14); display: block; } .llp-pagination-dots span.is-active { background: var(--llp-gold); } .llp-profile-footer { display: flex; justify-content: flex-end; margin-top: 24px; } /* Leaderboard visibility - 3-way choice (v0.19.0), replacing the old single checkbox + nickname field. Each option is a clickable card built from a wrapping