/* ========================================================== MOSAIC / USERSWP Scoped frontend styling Scope applies to BOTH the in-page UsersWP content (.mosaic-userswp, injected via the_content filter) AND the auth lightbox (.uwp-auth-modal, appended to outside that wrapper). :is() lets every rule reach either ancestor. ========================================================== */ /* Brand variables must live on BOTH scopes, or var() resolves to nothing inside the modal (it's not a child of .mosaic-userswp). */ .mosaic-userswp, .uwp-auth-modal { --mosaic-navy: #10233d; --mosaic-amber: #e9b44c; --mosaic-limestone: #f5f2eb; --mosaic-white: #ffffff; --mosaic-sage: #5a8e67; --mosaic-ruby: #8a2e2e; --mosaic-slate: #4d5358; --mosaic-lead: #2b2d30; color: var(--mosaic-slate); font-family: "Open Sans", Arial, sans-serif; } /* Keep UsersWP content from stretching too wide */ :is(.mosaic-userswp, .uwp-auth-modal) .uwp_page, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-page, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-account, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-login, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-register { max-width: 960px; margin-inline: auto; } /* Main cards and form surfaces */ :is(.mosaic-userswp, .uwp-auth-modal) .card, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-card, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-header, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-content, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-account-form, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-login-form, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-registration-form, :is(.mosaic-userswp, .uwp-auth-modal) form { background: rgba(245, 242, 235, 0.97); border: 1px solid rgba(16, 35, 61, 0.14); border-radius: 8px; box-shadow: 0 10px 30px rgba(16, 35, 61, 0.12); } /* Prevent nested form elements from becoming cards */ :is(.mosaic-userswp, .uwp-auth-modal) form form, :is(.mosaic-userswp, .uwp-auth-modal) form .form-group, :is(.mosaic-userswp, .uwp-auth-modal) form .mb-3, :is(.mosaic-userswp, .uwp-auth-modal) form .row { background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* Form spacing */ :is(.mosaic-userswp, .uwp-auth-modal) .uwp-login-form, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-registration-form, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-account-form, :is(.mosaic-userswp, .uwp-auth-modal) .getpaid-address-edit-form { padding: 30px; } /* Headings */ :is(.mosaic-userswp, .uwp-auth-modal) h1, :is(.mosaic-userswp, .uwp-auth-modal) h2, :is(.mosaic-userswp, .uwp-auth-modal) h3, :is(.mosaic-userswp, .uwp-auth-modal) h4, :is(.mosaic-userswp, .uwp-auth-modal) .card-title, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-title { color: var(--mosaic-navy); font-family: "Merriweather", Georgia, serif; font-weight: 600; } /* Labels */ :is(.mosaic-userswp, .uwp-auth-modal) label, :is(.mosaic-userswp, .uwp-auth-modal) .form-label, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-form-label { color: var(--mosaic-lead); font-weight: 600; } /* Inputs */ :is(.mosaic-userswp, .uwp-auth-modal) input[type="text"], :is(.mosaic-userswp, .uwp-auth-modal) input[type="email"], :is(.mosaic-userswp, .uwp-auth-modal) input[type="password"], :is(.mosaic-userswp, .uwp-auth-modal) input[type="url"], :is(.mosaic-userswp, .uwp-auth-modal) input[type="tel"], :is(.mosaic-userswp, .uwp-auth-modal) input[type="number"], :is(.mosaic-userswp, .uwp-auth-modal) select, :is(.mosaic-userswp, .uwp-auth-modal) textarea, :is(.mosaic-userswp, .uwp-auth-modal) .form-control { min-height: 46px; color: var(--mosaic-lead); background: var(--mosaic-white); border: 1px solid #c8beaf; border-radius: 4px; box-shadow: none; } :is(.mosaic-userswp, .uwp-auth-modal) textarea { min-height: 130px; } :is(.mosaic-userswp, .uwp-auth-modal) input:hover, :is(.mosaic-userswp, .uwp-auth-modal) select:hover, :is(.mosaic-userswp, .uwp-auth-modal) textarea:hover, :is(.mosaic-userswp, .uwp-auth-modal) .form-control:hover { border-color: var(--mosaic-slate); } :is(.mosaic-userswp, .uwp-auth-modal) input:focus, :is(.mosaic-userswp, .uwp-auth-modal) select:focus, :is(.mosaic-userswp, .uwp-auth-modal) textarea:focus, :is(.mosaic-userswp, .uwp-auth-modal) .form-control:focus { border-color: var(--mosaic-navy); outline: 0; box-shadow: 0 0 0 1px var(--mosaic-navy), 0 0 0 4px rgba(233, 180, 76, 0.22); } /* Primary buttons */ :is(.mosaic-userswp, .uwp-auth-modal) .btn-primary, :is(.mosaic-userswp, .uwp-auth-modal) button[type="submit"], :is(.mosaic-userswp, .uwp-auth-modal) input[type="submit"], :is(.mosaic-userswp, .uwp-auth-modal) .uwp-btn-primary { color: var(--mosaic-white); background: var(--mosaic-navy); border: 1px solid var(--mosaic-navy); border-radius: 4px; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 3px 10px rgba(16, 35, 61, 0.18); } :is(.mosaic-userswp, .uwp-auth-modal) .btn-primary:hover, :is(.mosaic-userswp, .uwp-auth-modal) .btn-primary:focus, :is(.mosaic-userswp, .uwp-auth-modal) button[type="submit"]:hover, :is(.mosaic-userswp, .uwp-auth-modal) button[type="submit"]:focus, :is(.mosaic-userswp, .uwp-auth-modal) input[type="submit"]:hover, :is(.mosaic-userswp, .uwp-auth-modal) input[type="submit"]:focus, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-btn-primary:hover { color: var(--mosaic-white); background: #183555; border-color: var(--mosaic-amber); box-shadow: 0 4px 12px rgba(16, 35, 61, 0.24), inset 0 -3px 0 var(--mosaic-amber); } /* Secondary buttons */ :is(.mosaic-userswp, .uwp-auth-modal) .btn-secondary, :is(.mosaic-userswp, .uwp-auth-modal) .btn-outline-primary, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-btn-secondary { color: var(--mosaic-navy); background: transparent; border-color: var(--mosaic-navy); } :is(.mosaic-userswp, .uwp-auth-modal) .btn-secondary:hover, :is(.mosaic-userswp, .uwp-auth-modal) .btn-outline-primary:hover, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-btn-secondary:hover { color: var(--mosaic-navy); background: rgba(233, 180, 76, 0.12); border-color: var(--mosaic-amber); } /* Links */ :is(.mosaic-userswp, .uwp-auth-modal) a { color: var(--mosaic-navy); text-decoration-color: transparent; text-underline-offset: 3px; } :is(.mosaic-userswp, .uwp-auth-modal) a:hover, :is(.mosaic-userswp, .uwp-auth-modal) a:focus { color: #183555; text-decoration: underline; text-decoration-color: var(--mosaic-amber); text-decoration-thickness: 2px; } /* Tabs */ :is(.mosaic-userswp, .uwp-auth-modal) .nav-tabs { border-bottom: 1px solid rgba(16, 35, 61, 0.18); } :is(.mosaic-userswp, .uwp-auth-modal) .nav-tabs .nav-link { color: var(--mosaic-slate); background: transparent; border: 0; border-bottom: 3px solid transparent; } :is(.mosaic-userswp, .uwp-auth-modal) .nav-tabs .nav-link:hover { color: var(--mosaic-navy); border-bottom-color: rgba(233, 180, 76, 0.45); } :is(.mosaic-userswp, .uwp-auth-modal) .nav-tabs .nav-link.active { color: var(--mosaic-navy); background: transparent; border-bottom-color: var(--mosaic-amber); font-weight: 700; } /* Profile banner */ :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-header, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-cover, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-banner { overflow: hidden; border-radius: 8px 8px 0 0; } /* Avatar */ :is(.mosaic-userswp, .uwp-auth-modal) .avatar, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-avatar img, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-avatar img { border: 4px solid var(--mosaic-limestone); border-radius: 50%; box-shadow: 0 4px 14px rgba(16, 35, 61, 0.18); } /* User directory cards */ :is(.mosaic-userswp, .uwp-auth-modal) .uwp-users-list .card, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-user-item, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-item { transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } :is(.mosaic-userswp, .uwp-auth-modal) .uwp-users-list .card:hover, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-user-item:hover, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-profile-item:hover { transform: translateY(-2px); border-color: rgba(233, 180, 76, 0.55); box-shadow: 0 14px 32px rgba(16, 35, 61, 0.16); } /* Pagination */ :is(.mosaic-userswp, .uwp-auth-modal) .page-link, :is(.mosaic-userswp, .uwp-auth-modal) .pagination a { color: var(--mosaic-navy); background: var(--mosaic-limestone); border-color: #d3cabd; } :is(.mosaic-userswp, .uwp-auth-modal) .page-item.active .page-link, :is(.mosaic-userswp, .uwp-auth-modal) .pagination .current { color: var(--mosaic-white); background: var(--mosaic-navy); border-color: var(--mosaic-navy); } /* Notices */ :is(.mosaic-userswp, .uwp-auth-modal) .alert-success, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-alert-success { color: #244b2d; background: #eef5ef; border-color: var(--mosaic-sage); } :is(.mosaic-userswp, .uwp-auth-modal) .alert-warning, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-alert-warning { color: #64470c; background: #fff8e8; border-color: var(--mosaic-amber); } :is(.mosaic-userswp, .uwp-auth-modal) .alert-danger, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-alert-error, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-error { color: #682121; background: #fbf0ee; border-color: var(--mosaic-ruby); } /* Small helper text */ :is(.mosaic-userswp, .uwp-auth-modal) .form-text, :is(.mosaic-userswp, .uwp-auth-modal) .description, :is(.mosaic-userswp, .uwp-auth-modal) small { color: var(--mosaic-slate); } /* Remove excessive Bootstrap shadows inside UsersWP */ :is(.mosaic-userswp, .uwp-auth-modal) .shadow, :is(.mosaic-userswp, .uwp-auth-modal) .shadow-sm, :is(.mosaic-userswp, .uwp-auth-modal) .shadow-lg { box-shadow: none !important; } /* ========================================================== MODAL-SPECIFIC The modal chrome and the backdrop live OUTSIDE the normal .mosaic-userswp wrapper, so these are handled directly. ========================================================== */ /* Modal panel surface (matches the card/limestone treatment) */ .uwp-auth-modal .modal-content { background: var(--mosaic-limestone, #f5f2eb); border: 1px solid rgba(16, 35, 61, 0.16); border-radius: 10px; box-shadow: 0 24px 60px rgba(16, 35, 61, 0.28); } /* The card inside the modal ships as a full-bleed container; let the modal-content provide the surface so we don't double up borders. */ .uwp-auth-modal .modal-content .card.border-0 { background: transparent; border: 0; box-shadow: none; } /* Modal header + close button */ .uwp-auth-modal .modal-header { border-bottom: 1px solid rgba(16, 35, 61, 0.12); } .uwp-auth-modal .modal-header .btn-close, .uwp-auth-modal .modal-header .close { color: var(--mosaic-navy); } /* Brand-tinted backdrop. .modal-backdrop is a SIBLING appended to , not a descendant of the modal, so it needs its own rule. Navy-tinted dim instead of Bootstrap's default flat black. */ .modal-backdrop, .modal-backdrop.show { background-color: var(--mosaic-navy, #10233d); } .modal-backdrop.show { opacity: 0.55; } /* ========================================================== */ /* Mobile */ @media (max-width: 700px) { :is(.mosaic-userswp, .uwp-auth-modal) .uwp-login-form, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-registration-form, :is(.mosaic-userswp, .uwp-auth-modal) .uwp-account-form, :is(.mosaic-userswp, .uwp-auth-modal) .getpaid-address-edit-form { padding: 22px 18px; } :is(.mosaic-userswp, .uwp-auth-modal) .nav-tabs { gap: 4px; } :is(.mosaic-userswp, .uwp-auth-modal) .nav-tabs .nav-link { padding-inline: 10px; } } /* AyeCode ships field labels as .visually-hidden (placeholder-driven forms). Un-clip them so pre-filled fields (e.g. the account page) stay labelled. Must use !important — BS5's .visually-hidden sets every prop !important. Only targets label.visually-hidden; checkbox/radio/file labels are already visible, and skip-link .visually-hidden-focusable is untouched. */ :is(.mosaic-userswp, .uwp-auth-modal) label.visually-hidden { position: static !important; width: auto !important; height: auto !important; margin: 0 0 .375rem !important; padding: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; display: block; }