/* Directory List One */ .directory-list-one .members-list { display: flex; flex-direction: row; flex-wrap: wrap; } .directory-list-one .membersListImg { background: var(--gray-2);} .directory-list-one .members-list-content { padding: 25px;} .directory-list-one .members-list-item {flex: 1 0 31%;box-shadow: var(--shadow-2);margin: 0 15px 30px;overflow: hidden;border-radius: var(--border-radius);} .directory-list-one .mwDirectory-item { width: 24%;} .directory-list-one .members-list-item:hover { box-shadow: var(--shadow-2); } .directory-list-one .membersListImg {background-repeat: no-repeat;background-size: cover;background-position: center center;} .directory-list-one .members-list-content { padding: 20px 20px 0;} .directory-list-one .switchHolder { display: flex; align-items: center; margin: 0 auto 50px; width: 250px; } .directory-list-one .switchHolder .text-primary { font-weight: bold; font-size: 16px; margin-right: 10px; } .directory-list-one .switchHolder .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin-right: 10px; } .directory-list-one .switch input { opacity: 0; width: 0; height: 0; } .directory-list-one .sliderx { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--gray-2); -webkit-transition: .4s; transition: .4s; border-radius: 34px; } .directory-list-one .sliderx:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: var(--white); -webkit-transition: .4s; transition: .4s; border-radius: 50%; } .directory-list-one input:checked + .sliderx { background-color: var(--primary); } .directory-list-one input:focus + .sliderx { box-shadow: 0 0 1px var(--primary);} .directory-list-one input:checked + .sliderx:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .directory-list-one .b { font-weight: bold; font-size: 16px; } @media (max-width: 1199px) { .directory-list-one .members-list-item { flex: 1 0 42%; } } @media (max-width: 999px) { .directory-list-one .members-list-item { flex: 1 0 100%; } .directory-list-one .mwDirectory-item { width: 50%; } } @media (max-width: 699px) { .directory-list-one .members-list-item {flex: 1 0 100%;margin: 0 0 30px;} .directory-list-one .mwDirectory-item { width: 100%; } } /* Directory Profile */ .profile-picture {height: 140px;width: 140px;overflow:hidden;/* border-radius:50%; *//* margin: 0 auto; *//* border: 3px solid var(--gray-3); */display:flex;align-items: center;} .profile-picture img {widtH:100%;transform: scale(1.5);} .directory-details-one .row .row .col-lg-3 {border-right:1px solid var(--gray-4)} .profile-card {padding: 120px 30px 30px;background:var(--primary);margin-bottom:25px;border-radius:10px;} .profile-card p {margin:0; color:var(--white); font-weight:700; font-size:18px;} .directory-details-one .profileOverview {display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 0px;} .directory-details-one .profileOverview h6, .directory-details-one .profileOverview p { margin-bottom: 5px; } .directory-details-one .profileOverview div {width: 32%;margin-bottom: 20px;} .directory-details-one .profileOverview h6 {} .directory-details-one .profileOverview p { } @media (max-width: 699px) { .directory-details-one .profileOverview { display: block; } .directory-details-one .profileOverview div { width: 100%; margin-bottom: 20px; } } .directory-details-one .col-lg-9 {background:var(--white);border-radius:10px;padding: 0px 50px;margin: 0 auto;} .sidebarinner {background:var(--white);/* text-align:center; */padding: 50px 25px 15px;border-radius: 10px;} .directory-details-one .col-lg-9 .col-lg-9 {padding:0 50px;} .directory-details-one .sidebarinner div {margin: 0 auto 25px;} .directory-details-one .sidebarinner div ul {list-style-type: none; padding:0} .directory-details-one .sidebarinner div ul li { border-bottom:1px solid var(--gray-4); padding:10px 0} .directory-details-intro { text-align:center; } /*** Dirsctory Search Form ***/ .search-form { display: flex; align-items: center; width: 100%; margin: 0 auto 40px;} .search-input { border: 2px solid var(--gray-2); border-radius: 20px; padding: 10px; font-size: 16px; width: 100%; margin-right: 10px;} .search-input:focus { outline: none; border-color: var(--primary);} .search-button { background-color: var(--primary); border: none; border-radius: 20px; color:var(--white); cursor: pointer; padding: 10px 20px; font-size: 16px;} .reset-button { margin-left:10px; text-decoration: underline} .search-button:hover { background-color: var(--primary-7);} .fa-search { font-size: 16px; } .members-list-two {} .members-list-two .members-list-item { display:flex; justify-content:space-between;} .members-list-two .members-list-item .membersListImg {height:250px;width:250px;background-size: cover;background-repeat:no-repeat;background-position:center} .members-list-two { display: flex; flex-direction: row; flex-wrap: wrap; } .members-list-two .membersListImg { background: var(--gray-2);} .members-list-two .members-list-content { padding: 25px; width:60%;} .members-list-two .members-list-item {flex: 1 0 41%;box-shadow: var(--shadow-2);margin: 0 15px 30px;overflow: hidden;border-radius: var(--border-radius);} @media (max-width: 1199px) { } @media (max-width: 999px) { } @media (max-width: 699px) { .members-list-two .members-list-item {flex: 1 0 100%; margin: 0 0px 30px;} .members-list-two .members-list-item { display:block; } .members-list-two .members-list-item .membersListImg { width:100%; } } .members-list-three {} .members-list-three .members-list-item {} .members-list-three .members-list-item .membersListImg { background-repeat: no-repeat; background-size: cover; background-position: center center; } .members-list-three { display: flex; flex-direction: row; flex-wrap: wrap; } .members-list-three .membersListImg { background: var(--gray-2);} .members-list-three .members-list-content { padding: 25px; width:60%;} .members-list-three .members-list-item {flex: 1 0 21%;box-shadow: var(--shadow-2);margin: 0 15px 30px;overflow: hidden;border-radius: var(--border-radius);} @media (max-width: 1199px) { } @media (max-width: 999px) { } @media (max-width: 699px) { .members-list-two .members-list-item {flex: 1 0 100%; margin: 0 0px 30px;} .members-list-two .members-list-item { display:block; } .members-list-two .members-list-item .membersListImg { width:100%; } } /* directory-details */ .directory-details-one label { display: block; margin-bottom: 15px; font-weight: bold; } .directory-details-one select { padding: 8px; font-size: 16px; border: 1px solid var(--gray-4); border-radius: 4px; width: 100%; box-sizing: border-box; margin-bottom: 15px; } .directory-details-one textarea { padding: 8px; font-size: 16px; border: 1px solid var(--gray-4); border-radius: 4px; width: 100%; box-sizing: border-box; margin-bottom: 15px; } .directory-details-one input[type="url"] { padding: 8px; font-size: 16px; border: 1px solid var(--gray-3); border-radius: 4px; width: 100%; box-sizing: border-box; margin-bottom: 15px; } .directory-details-one input[type="url"]::placeholder { color: var(--gray-8); } .directory-details-one input[type="url"]:required { border-color: var(--gray-4); } .directory-details-one input[type="url"]:focus { outline: none; box-shadow: 0 0 4px var(--gray-9); } .directory-details-one input[type="email"] { padding: 8px; font-size: 16px; border: 1px solid var(--gray-3); border-radius: 4px; width: 100%; box-sizing: border-box; margin-bottom: 15px;} .directory-details-one input[type="email"]::placeholder { color: var(--gray-7); } .directory-details-one input[type="email"]:required { border-color: var(--gray-4); } .directory-details-one input[type="email"]:focus { outline: none; box-shadow: 0 0 4px var(--gray-7); } .directory-details-one input[type="text"] { padding: 8px; font-size: 16px; border: 1px solid var(--gray-1); border-radius: 4px; width: 100%; box-sizing: border-box; margin-bottom: 15px;} .directory-details-one input[type="text"]::placeholder { color: var(--gray-7); } .directory-details-one input[type="text"]:required { border-color: var(--gray-4); } .directory-details-one input[type="text"]:focus { outline: none; box-shadow: 0 0 4px var(--gray-7); } .directory-details-one input[type="file"]:before { font-family: "Font Awesome 5 Free"; content: "\f382"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; margin-right:10px; color: var(--primary-4); font-size: 36px; } .directory-details-one input[type="file"] { padding: 8px; border-radius: 4px; box-sizing: border-box; margin-bottom: 15px; background: url(/images/upload.png); width: 61px; cursor: pointer;} .profileUpload {display:flex;flex-direction: row-reverse;align-items:center;justify-content: center;} .directory-details-one input[type="file"]:focus { outline: none; box-shadow: 0 0 4px var(--gray-7);} .directory-details-one input[type="file"]:valid { } /* pricingTable */ .pricingTable {display: flex;justify-content: space-between;margin:0 0 50px; } .pricingColumn {margin: 0 0px;text-align: center;width: 24%;} .price {background-color: var(--white);padding: 30px 20px 20px;border-radius: 10px;} .pricingColumn:nth-child(1) .price {background:var(--gray-1); } .pricingColumn:nth-child(2) .price {background:var(--gray-2); } .pricingColumn:nth-child(3) .price {background:var(--gray-3); } .pricingColumn:nth-child(4) .price {background:var(--primary-1); } .price h5 { font-weight: bold; margin-bottom:6 20px;} .priceContent { margin-bottom: 20px;} .priceCost {color: var(--primary);font-size: 30px;font-weight: bold;margin-bottom: 20px;font-style: italic;} .price ul {list-style: none;padding: 0;margin: 0 0 20px;} .price ul li {padding: 10px 0;font-size: 16px;border-bottom: 1px solid var(--gray-4);} .price ul li:last-child { border-bottom: none; } .price a.button { display: inline-block; background-color: var(--gray-5); color: var(--white); padding: 10px 20px; border-radius: 5px; text-decoration: none; margin-top: 20px; } .directory-form { margin: 0 auto; /* max-width: 760px; */ text-align: center; margin-bottom: 30px; padding: 32px; background: var(--white); border-radius: 24px; /* box-shadow: 0 4px 20px rgba(0, 0, 0, .06); */ } /* Associate Registration form — section headings. Lives here (not inline in the regmgr template) so it isn't stripped from the AJAX-rendered form fragment, and so it reliably beats `._content-style h3`. */ .directory-form .form-section-title { text-align: left; margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--primary); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); } .directory-form table.Dialog tr.form-section td { padding-top: 0; } .directory-form table.Dialog tr.form-section .form-section-title { margin: 20px 0 10px; } .directory-form .Dialog { width: 100%; border-collapse: collapse;} .directory-form .Dialog th {/*! text-align: right; *//*! width: 40%; */font-weight: 600;} .directory-form .mwDialog.Dialog th {width:40%;} .directory-form .Dialog th label {/* align-items:center; */margin: 0;padding: 0;} .directory-form .Dialog td { min-width: 500px;} .directory-form .Dialog input[type="file"] { width: auto;} .directory-form .Dialog select { height: 28px;} .directory-form .Dialog textarea { height: 100px;} .directory-form .Dialog input[type="submit"] { background-color: #007BFF; color: #fff; border: none; border-radius: 3px; padding: 10px 20px; cursor: pointer; } .directory-form .Dialog input[type="submit"]:hover { background-color: #0056b3;} /* User-account fields (email / first / last / password / repass) are auto-rendered by the regmgr form engine as a separate per field, with the label and input on SEPARATE rows () instead of one . The field renderer regenerates this markup, so it can't be fixed from the template — reflow each such tbody back into the same right-label / input two-column layout used by the rest of the form. */ .directory-form table.Dialog:has(tbody > tr > th:only-child) { display: block; } .directory-form table.Dialog tbody:has(> tr > th:only-child) { display: grid; grid-template-columns: 40% 60%; align-items: center; } .directory-form table.Dialog tbody:has(> tr > th:only-child) > tr { display: contents; } .directory-form table.Dialog tbody:has(> tr > th:only-child) > tr > th { text-align: right; width: auto; font-weight: 600; padding-right: 10px; } .directory-form table.Dialog tbody:has(> tr > th:only-child) > tr > td { width: auto; } .rmForm-action { color: var(--white); border-color: var(--primary); background: var(--primary); padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 20px; font-weight:600; } .rmForm-action:hover { border-color: var(--primary-5); background: var(--primary-5); } /* Resource Library Grid */ .resource-library-grid { display: flex; flex-wrap: wrap; justify-content: space-around; } .resource-library-grid .resource-item {box-sizing: border-box;width: calc(32% - 20px);margin-bottom: 25px;overflow: hidden;background-color: #fff;border: 1px solid #efefef;border-radius: 5px;} .resource-library-grid .resource-image img { width: 100%; height: auto; border-bottom: 1px solid #ccc; border-radius: 5px 5px 0 0; } .resource-library-grid .resource-body {padding: 25px 25px 0;} @media screen and (max-width: 768px) { .resource-library-grid .resource-item { width: calc(50% - 20px); /* Adjusted width for smaller screens */ } } @media screen and (max-width: 560px) { .resource-library-grid .resource-item { width: calc(100% - 20px); /* Full width for even smaller screens */ } } /* Resource Library List */ .resource-library-list { display: flex; flex-wrap: wrap; justify-content: space-around; } .resource-library-list .resource-item {box-sizing: border-box;width: 100%;margin-bottom: 25px;overflow: hidden;background-color: #fff;border-radius: 10px;display: flex;align-items: center;justify-content: space-between;} .resource-library-list .resource-item:nth-child(even) { background-color: #f4f4f4; /* Even background color */ } .resource-library-list .resource-item:nth-child(odd) { background-color: #fafafa; } .resource-library-list .resource-image { width: 30%; height: 300px; /* Fixed height for the container */ overflow: hidden; /* Ensure the image doesn't overflow */} .resource-library-list .resource-image img { width: 100%; height: 100%; /* Ensure the image takes up the full height of the container */ object-fit: cover; /* Maintain aspect ratio and cover the container */ border-bottom: 1px solid #ccc; border-radius: 5px 0 0 5px;} .resource-library-list .resource-body { padding: 25px 25px 0; width: 70%; } /* Responsive Styles */ @media screen and (max-width: 768px) { .resource-library-list .resource-item { flex-direction: column; /* Stack items vertically on smaller screens */ } .resource-library-list .resource-image { width: 100%; margin-bottom: 15px; } .resource-library-list .resource-body { width: 100%; } } /* News List styles */ .news-list { display: flex; flex-wrap: wrap;} .news-item {box-sizing: border-box;width: calc(33.33% - 20px);margin: 10px;border: 1px solid #efefef; border-radius: 5px;padding: 25px 25px 0;} .news-title {font-weight: bold;margin-bottom: 10px;font-size: 20px;} .news-date {margin-bottom: 15px;font-size: 15px;font-style: italic;} .news-content { } /* Responsive styles */ @media screen and (max-width: 768px) { .news-item { width: calc(50% - 20px); /* Adjusted width for smaller screens */ } } @media screen and (max-width: 560px) { .news-item { width: calc(100% - 20px); /* Full width for even smaller screens */ } } .eshop-events-style-1 .events-item-left { font-weight: 700 !important;} .sidebarinner {background-color: var(--light); /* Background color */width: 300px;} .directory-sidebar { } .profile-picture { border-radius: 50%; margin-bottom:25px;} .directory-sidebar-info p {font-size: 16px;line-height: 1.6;color: var(--primary-6); /* Text color */} .directory-sidebar-list a {text-decoration: none;} .directory-sidebar-list li {text-decoration: none;padding: 15px;border-bottom: 1px solid #ccc;} .memberProfileRenewal {background: var(--primary-6);text-align:center;padding:30px 30px 1px;color: #fff; border-radius: 5px} .directory-sidebar-img, .directory-sidebar-img-placeholder {width:100px; height:100px;border-radius:100%;margin-bottom:30px;} .memberProfileRenewal p {color:var(--white);} .member-directory-details .member-directory-image-placeholder, .member-directory-details .member-directory-image {width:100%;/* height: 100px; */max-width: 300px;margin-bottom: 30px;} .mwInput.file .fileFace { position: absolute; bottom: 0px; width: 100%; height: 0; border-top-width: 1px; border-top-style: solid; } /* ========================================================= rmForm validation messages ========================================================= */ .rmForm-status { } .rmForm-status .status { display: block; padding: 6px 0 6px 24px; margin: 0; position: relative; line-height: 1.45; } /* bullet dot for each message */ .rmForm-status .status:before { content: ""; position: absolute; left: 6px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: #c0392b; } /* header row (e.g. "Validation failed") */ .rmForm-status .status.Error, .rmForm-status .status:first-child > .status.Error, .rmForm-status > .status.error:first-child > .status.Error { font-weight: 700; font-size: 15px; color: #8a1f1f; padding: 0 0 8px 0; margin: 0 0 8px; border-bottom: 1px solid #f3c2c2; } /* remove bullet from the header row */ .rmForm-status .status.Error:before, .rmForm-status > .status.error:first-child:before { display: none; } /* nested wrapper (status error > status Error error) */ .rmForm-status > .status.error:first-child { padding: 0; margin: 0 0 10px; background: none; border: 0; } @media (max-width: 520px) { .rmForm-status { padding: 12px 14px; font-size: 13px; } } /* ========================================================= Member Portal (directory.member_portal.php) All rules scoped under .member-portal to keep them local. ========================================================= */ .member-portal { font-size: 16px; color: var(--text-color); } .member-portal .row {display: flex;flex-wrap: wrap;justify-content: center;} .member-portal .col-lg-3, .member-portal .col-lg-9 { box-sizing: border-box; padding: 0 12px; } .member-portal .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .member-portal .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .member-portal .tab-content { display: none; } .member-portal .tab-content.active { display: block; } /* ============================================================ Portal surface system — tighter / more consistent spacing (aligned to thememembercommons). Colors + fonts kept from WISC. Shared tokens: surface radius 24px, soft shadow 0 4px 20px rgba(0,0,0,.06), 30px gap between stacked surfaces. ============================================================ */ /* ---- Sidebar ---- */ .member-portal .mp-sidebar { position: relative; margin-bottom: 30px; background: var(--white); border-radius: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, .06); overflow: hidden; } .member-portal .mp-sidebar-header { padding: 32px 24px 24px; text-align: center; border-bottom: 1px solid var(--gray-2); } .member-portal .mp-sidebar-photo { width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%; background-position: center center; background-size: cover; background-repeat: no-repeat; border: 4px solid var(--white); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); } .member-portal .mp-sidebar-photo-placeholder { background-image: url(/images/placeholder.png); background-size: 60% 60%; background-color: var(--gray-1); } .member-portal .mp-sidebar-greeting { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-color-light); } .member-portal .mp-sidebar-name { font-size: 22px; font-weight: 700; color: var(--heading-color); margin: 0; line-height: 1.2; } /* meta rows */ .member-portal .mp-sidebar-meta { list-style: none; padding: 20px 24px; margin: 0; } .member-portal .mp-sidebar-meta li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gray-2); font-size: 14px; } .member-portal .mp-sidebar-meta li:first-child { border-top: 0; } .member-portal .mp-sidebar-meta-label { color: var(--text-color-light); } .member-portal .mp-sidebar-meta-value { color: var(--heading-color); font-weight: 600; text-align: right; } .member-portal .mp-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); } /* sidebar section label (e.g. "Associate Card") */ .member-portal .mp-sidebar-section-title { margin: 0 24px 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--text-color-light); } /* sidebar divider (above/below the nav) */ .member-portal .mp-sidebar-divider { margin: 8px 12px; border: 0; border-top: 1px solid var(--gray-2); } /* membership card (sidebar wallet) */ .member-portal .mp-member-card { position: relative; margin: 0 24px 12px; padding: 22px 22px 22px 26px; background: linear-gradient(135deg, var(--primary-5), var(--primary-7)); color: var(--white); border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); overflow: hidden; } .member-portal .mp-member-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,0.08); } .member-portal .mp-member-card-compact { display: flex; align-items: center; gap: 12px; } .member-portal .mp-member-card-logo { width: 36px; height: 36px; object-fit: contain; opacity: 0.9; flex: 0 0 auto; } .member-portal .mp-member-card-info { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; } .member-portal .mp-member-card-label { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.75; } .member-portal .mp-member-card-name { margin: 2px 0 6px; font-size: 15px; font-weight: 700; color: var(--white); line-height: 1.2; word-break: break-word; } .member-portal .mp-member-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; } .member-portal .mp-member-card-meta strong { display: block; opacity: 0.75; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; font-size: 9px; } .member-portal .mp-member-card-actions { display: flex; gap: 8px; margin-top: 8px; } .member-portal .mp-member-card-actions-outside { margin: 0 24px 12px; } .member-portal .mp-member-card-actions .mp-btn { flex: 1 1 0; padding: 9px 12px; font-size: 12px; } /* renewal callout */ .member-portal .mp-renewal-callout { margin: 0 24px 24px; padding: 22px 20px; background: var(--secondary-1); border: 1px solid var(--secondary-3); border-radius: 14px; text-align: center; } .member-portal .mp-renewal-callout p { margin: 0 0 12px; font-weight: 600; color: var(--secondary-7); font-size: 14px; } /* sidebar nav */ .member-portal .mp-sidebar-nav { padding: 4px 8px 8px; } .member-portal .mp-sidebar-nav ul { list-style: none; padding: 0; margin: 0; } .member-portal .mp-sidebar-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-radius: 8px; color: var(--heading-color); text-decoration: none; font-weight: 600; font-size: 15px; transition: color var(--transition-200), background-color var(--transition-200); } .member-portal .mp-sidebar-nav a:hover { color: var(--primary); background: var(--gray-1); } .member-portal .mp-sidebar-logout { display: block; text-align: center; margin: 8px 24px 24px; text-decoration: none; } /* ---- Buttons (pill) ---- */ .member-portal .mp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; font-size: 14px; font-weight: var(--font-weight-semi-bold); letter-spacing: .04em; font-family: var(--font-family-sans-serif); border-radius: 999px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color var(--transition-200), color var(--transition-200), border-color var(--transition-200), box-shadow var(--transition-200); } .member-portal .mp-btn-blue { background: var(--primary); color: var(--white); border-color: var(--primary); } .member-portal .mp-btn-blue:hover { background: var(--primary-6); border-color: var(--primary-6); color: var(--white); } .member-portal .mp-btn-outline-blue { background: transparent; color: var(--primary); border-color: var(--primary); } .member-portal .mp-btn-outline-blue:hover { background: var(--primary-1); color: var(--primary-6); border-color: var(--primary-6); } .member-portal .mp-btn-orange { background: var(--orange); color: var(--white); border-color: var(--orange); } .member-portal .mp-btn-orange:hover { background: #d96910; border-color: #d96910; color: var(--white); } .member-portal .mp-btn.is-loading { opacity: 0.7; pointer-events: none; } /* ---- Hero card (grid: identity | stats / footer) ---- */ .member-portal .mp-hero { position: relative; margin-bottom: 24px; padding: 32px 36px; background: var(--primary-1); border-radius: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, .06); overflow: hidden; display: grid; grid-template-columns: 1fr minmax(220px, auto); grid-template-areas: "identity stats" "footer footer"; gap: 24px 32px; align-items: start; } .member-portal .mp-hero-identity { grid-area: identity; margin: 0; align-self: center; } .member-portal .mp-hero-anniversary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; background: var(--secondary-1); color: var(--secondary-7); border-radius: 100px; margin-bottom: 10px; } .member-portal .mp-hero-anniversary-emoji { font-size: 14px; } .member-portal .mp-hero-greeting { display: block; color: var(--text-color-light); font-size: 15px; margin-bottom: 2px; } .member-portal .mp-hero-name { margin: 0 0 8px; font-size: 30px; font-weight: 700; color: var(--heading-color); line-height: 1.15; } .member-portal .mp-hero-sub { margin: 8px 0 0; color: var(--text-color-light); font-size: 15px; } /* badges */ .member-portal .mp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .member-portal .mp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; line-height: 1.4; border-radius: 100px; background: rgba(255, 255, 255, .7); color: var(--primary-7); } /* Default Associate Access tier badge — charcoal black per WISC brand */ .member-portal .mp-badge-tier { background: #797982; color: var(--white); } .member-portal .mp-badge-tier-bronze { background: #B08D57; } .member-portal .mp-badge-tier-silver { background: #9AA1A8; } .member-portal .mp-badge-tier-gold { background: #D4AF37; color: #2A1F00; } .member-portal .mp-badge-tier-platinum { background: linear-gradient(135deg, #D8D8D8, #A6A6A6); color: #1F1F1F; } .member-portal .mp-badge-lifetime { background: var(--primary-1); color: var(--primary-7); } .member-portal .mp-badge-founding { background: var(--secondary-1); color: var(--secondary-7); } .member-portal .mp-badge-verified { background: var(--success-1); color: var(--success-6); } .member-portal .mp-badge-new { background: var(--info-1); color: var(--info-6); } .member-portal .mp-badge-streak { background: var(--primary-2); color: var(--primary-7); } .member-portal .mp-badge-birthday { background: #FFE4F2; color: #9C2A6B; } /* stats — translucent chips stacked in the hero's right column */ .member-portal .mp-hero-stats { grid-area: stats; display: flex; flex-direction: column; gap: 8px; align-self: center; } .member-portal .mp-hero-stat { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .85); border-radius: 12px; } .member-portal .mp-hero-stat-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-color-light); } .member-portal .mp-hero-stat-value { font-size: 15px; font-weight: 700; color: var(--heading-color); } /* footer (progress + cta) */ .member-portal .mp-hero-footer { grid-area: footer; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .6); } .member-portal .mp-hero-progress { flex: 1 1 260px; min-width: 0; } .member-portal .mp-hero-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; } .member-portal .mp-hero-progress-label { color: var(--text-color-light); } .member-portal .mp-hero-progress-label strong { color: var(--heading-color); } .member-portal .mp-hero-progress-link { color: var(--primary); text-decoration: none; font-weight: 600; } .member-portal .mp-hero-progress-link:hover { color: var(--primary-6); } .member-portal .mp-hero-progress-bar { height: 6px; background: rgba(255, 255, 255, .6); border-radius: 100px; overflow: hidden; } .member-portal .mp-hero-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-3), var(--primary)); border-radius: 100px; transition: width var(--transition-500); } .member-portal .mp-hero-complete { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; color: var(--success-6); font-weight: 600; font-size: 14px; } .member-portal .mp-hero-complete-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--success); color: var(--white); border-radius: 50%; font-size: 12px; } .member-portal .mp-hero-cta { flex: 0 0 auto; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); } /* ---- Content card + sections (one card, sections as dividers) ---- */ .member-portal .mp-content { margin-bottom: 30px; padding: 32px; background: var(--white); border-radius: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, .06); } .member-portal .mp-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--gray-2); } .member-portal .mp-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .member-portal .mp-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 12px; } .member-portal .mp-section-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--heading-color); } .member-portal .mp-section-link { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 13px; } .member-portal .mp-section-link:hover { color: var(--primary-6); } .member-portal .mp-section-support { background: var(--primary-1); border-top: 0; border-radius: 14px; padding: 24px; } .member-portal .mp-section-support p { margin: 0 0 16px; color: var(--primary-7); } /* ---- Responsive ---- */ @media (max-width: 991px) { .member-portal .col-lg-3, .member-portal .col-lg-9 { flex: 0 0 100%; max-width: 100%; } .member-portal .col-lg-3 { margin-bottom: 22px; } .member-portal .mp-hero { grid-template-columns: 1fr; grid-template-areas: "identity" "stats" "footer"; padding: 28px 24px; } .member-portal .mp-hero-name { font-size: 26px; } } @media (max-width: 599px) { .member-portal .mp-hero { padding: 22px 20px; } .member-portal .mp-hero-name { font-size: 23px; } .member-portal .mp-content { padding: 24px 20px; } .member-portal .mp-section-head { flex-wrap: wrap; } .member-portal .mp-hero-footer { gap: 12px; } .member-portal .mp-hero-cta { width: 100%; } }