/* ============================================================
PHOTONICS INDUSTRIES AUSTRALIA - "Spectral Authority" theme
============================================================ */
/* ============================================================
TABLE OF CONTENTS (search for the section title to jump to it)
Last organised: 2 November 2026
IMPORTANT: order matters. Later blocks deliberately override
earlier ones (for example the Deep Forest palette overrides the
navy :root at the top). Add new blocks at the END, do not move
existing blocks up or down.
1. Fonts and base design tokens (:root, original navy values)
2. Global type, page background, buttons (.pia-btn-gold, .pia-btn-outline)
3. PIA header, WA placeholder padding, nav menu, dropdowns
4. Content cards, forms, footer, accessibility (base rules)
5. WILDAPRICOT MODULE CSS OVERRIDES
(events calendar, events list, member directory, blog/news,
generic membership application)
6. HERO GADGET (.pia-hero, homepage + /pttc + /join) and RESPONSIVE
7. INNER PAGE HERO (.pia-ph-*), board of directors, content
column width, PIA FOOTER, WA branding hide
8. PIA - Deep Forest palette override (ACTIVE COLOURS)
9. PIA - Coloured card borders (.pia-unit-*)
10. PIA - Board of Directors rows (.pia-bod-row)
11. PIA - Hide "Homepage" from desktop nav
12. PIA HOMEPAGE - Recent News and Upcoming Events cards
13. PIA NEWS PAGE - Blog link colours
14. PIA - Wild Apricot icon set, hidden site-wide
15. PIA - Wild Apricot Subscription/General form, restyled
(.generalFormOuterContainer: login, subscription, join form base)
16. PIA - Responsive square map embed (Contact page)
17. PIA - Quote banner over a photo
18. PIA - Event detail page title bar
19. PIA - Event registration wizard nav
20. PIA - Event registration flow title
21. PIA - Reusable layout utilities (added 2 Nov 2026)
.pia-equal-row, .pia-row-cta, .pia-pills / .pia-pill
22. PIA JOIN PAGE - Membership application (added 2 Nov 2026)
photonics.org.au/join, gadget CSS class .pia-join-form
WHERE TO FIND THE CSS FOR A PAGE
- Homepage ............ 6, 9, 12, 21
- /pttc (course) ...... 6, 9 (hero CSS also lives in the page's
Custom HTML gadget)
- /about-us ........... 7, 10
- /members ............ 5 (member directory)
- /news ............... 5, 13
- Events pages ........ 5, 18, 19, 20
- /contact ............ 16
- /join ............... 6 (hero lives in its Custom HTML gadget),
9, 15, 21, 22
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
:root {
--pia-ink: #0B1226;
--pia-surface: #101C3F;
--pia-primary: #1E4FD8;
--pia-cyan: #4FE3FF;
--pia-gold: #F5B82E;
--pia-gold-deep:#D99410;
--pia-violet: #A78BFA;
--pia-paper: #FFFFFF;
--pia-tint: #F3F6FC;
--pia-spectrum: linear-gradient(90deg, var(--pia-cyan), var(--pia-primary) 35%, var(--pia-violet) 65%, var(--pia-gold));
--pia-border: #E3E9F4;
--pia-body-col: #44507A;
--pia-muted: #5A6786;
--pia-radius: 12px;
--pia-font-display: 'Space Grotesk', sans-serif;
--pia-font-body: 'Inter', sans-serif;
}
/* ============ GLOBAL TYPE ============ */
body, .WaGadgetContentEditor, .WaGadgetContentEditor p {
font-family: var(--pia-font-body) !important;
color: var(--pia-body-col);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.WaGadgetHeadline .gadgetStyleTitle,
.WaGadgetContentEditor h1, .WaGadgetContentEditor h2, .WaGadgetContentEditor h3 {
font-family: var(--pia-font-display) !important;
color: var(--pia-ink);
letter-spacing: -0.015em;
line-height: 1.15;
}
.WaGadgetContentEditor h2::after,
.WaGadgetHeadline .gadgetStyleTitle::after {
content: "";
display: block;
width: 56px; height: 3px;
margin-top: 12px;
border-radius: 2px;
background: var(--pia-gold);
}
a { color: var(--pia-primary); }
/* Base link colour already resolves to green via --pia-primary (redefined
further down in the Deep Forest override block). Hover previously jumped
to gold; now stays the same green with an underline added so there's
still a visible state change on hover. */
a:hover { color: var(--pia-primary); text-decoration: underline; }
/* ============ PAGE BACKGROUND ============ */
#mLayout, .mLayout, body { background: var(--pia-paper); }
/* ============ BUTTONS ============ */
.stylizedButton, .typeButton, input.typeButton,
.WaGadgetLoginButton .loginButton,
.functionalButton {
font-family: var(--pia-font-display) !important;
font-weight: 600;
background: var(--pia-gold) !important;
color: var(--pia-ink) !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 26px !important;
transition: background .2s ease, transform .15s ease;
}
.stylizedButton:hover, .typeButton:hover, .functionalButton:hover {
background: var(--pia-gold-deep) !important;
transform: translateY(-1px);
}
.WaGadgetLoginButton .loginButton {
background: var(--pia-ink) !important;
color: #fff !important;
}
/* PIA custom buttons - available site-wide */
.pia-btn-gold, .pia-btn-outline {
font-family: var(--pia-font-display);
font-weight: 600;
font-size: 15px;
padding: 14px 30px;
border-radius: 8px;
text-decoration: none;
display: inline-block;
transition: background .2s ease, transform .15s ease;
}
.pia-btn-gold { background: var(--pia-gold); color: var(--pia-ink) !important; }
.pia-btn-gold:hover { background: var(--pia-gold-deep) !important; transform: translateY(-1px); color: var(--pia-ink) !important; }
.pia-btn-outline { border: 1px solid rgba(255,255,255,.35); color: #fff !important; }
.pia-btn-outline:hover { background: rgba(255,255,255,.08); }
.pia-btn-profile {
font-family: var(--pia-font-display) !important;
font-weight: 600 !important;
font-size: 15px !important;
padding: 14px 30px !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--pia-primary) !important;
border: 2px solid var(--pia-primary) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
line-height: 1 !important;
transition: background .2s ease !important;
}
.pia-btn-profile:hover { background: rgba(30,79,216,0.06) !important; }
.pia-cog { font-size: 18px !important; line-height: 1 !important; }
/* ============ PIA HEADER ============ */
#idHeaderContentHolder {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
}
#id_mU5tEsu {
width: 100vw !important;
position: relative !important;
left: calc(50% - 50vw) !important;
background: #ffffff !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
border-bottom: 1px solid #eaeaea !important;
box-sizing: border-box !important;
}
/* ============ WA PLACEHOLDER PADDING OVERRIDES ============ */
#id_mU5tEsu .WaCustomLayoutPlaceHolder > div,
#id_mU5tEsu .WaLayoutPlaceHolder > div {
padding: 0 !important;
}
#id_Header2 > div {
padding: 0 !important;
}
#id_8PGpdNj > div {
padding: 0 !important;
}
#idHeaderContentHolder { box-shadow: none !important; }
.zoneHeader1,
.zoneHeader3 { margin-top: 0 !important; padding-top: 0 !important; }
.zoneHeader1 .WaPlaceHolder > div {
padding: 0 !important;
}
#id_mU5tEsu .WaLayoutTable {
width: 100% !important;
max-width: 1180px !important;
margin: 0 auto !important;
table-layout: auto !important;
}
#id_mU5tEsu .WaLayoutSeparator { width: 0 !important; padding: 0 !important; }
#id_rdwJ1qM {
width: 1% !important;
white-space: nowrap !important;
vertical-align: middle !important;
padding: 0 24px 0 28px !important;
}
#id_v1vW39L { vertical-align: middle !important; }
#id_HHgnNmr {
width: 1% !important;
white-space: nowrap !important;
vertical-align: middle !important;
text-align: right !important;
padding: 0 28px 0 24px !important;
position: relative !important;
z-index: 200 !important;
}
#id_H5sDtkg { display: none !important; }
#id_b7E38S1 { margin-bottom: 0 !important; }
.pia-auth-link {
color: #1E4FD8 !important;
font-size: 16px !important;
line-height: 26px !important;
font-weight: 500 !important;
font-family: 'Space Grotesk', sans-serif !important;
padding: 30px 18px !important;
text-decoration: none !important;
border-bottom: 2px solid #1E4FD8 !important;
display: inline-block !important;
white-space: nowrap !important;
transition: color 0.2s, border-color 0.2s !important;
}
.pia-auth-link:hover {
color: #1A8C6A !important;
border-bottom-color: #1A8C6A !important;
}
.pia-auth-link > span {
display: inline-block !important;
height: 26px !important;
line-height: 26px !important;
padding: 0 !important;
position: relative !important;
}
/* ---- Nav menu ---- */
#id_EDnGrxR .menuBackground { display: none !important; }
#id_EDnGrxR .menuInner { display: flex !important; justify-content: center !important; }
#id_EDnGrxR .menuInner ul.firstLevel {
display: flex !important;
align-items: flex-start !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#id_EDnGrxR .menuInner ul.firstLevel > li > .item > a {
color: #0B1226 !important;
font-size: 16px !important;
font-weight: 500 !important;
font-family: 'Space Grotesk', sans-serif !important;
padding: 30px 18px !important;
text-decoration: none !important;
border-bottom: 2px solid transparent !important;
display: block !important;
white-space: nowrap !important;
transition: color 0.2s, border-color 0.2s !important;
}
/* Current-page indicator stays gold, this is a different signal than hover
so it's been split out from the hover rule below. */
#id_EDnGrxR .menuInner ul.firstLevel > li.sel > .item > a {
color: #F5B82E !important;
border-bottom-color: #F5B82E !important;
}
#id_EDnGrxR .menuInner ul.firstLevel > li > .item > a:hover {
color: #1A8C6A !important;
border-bottom-color: #1A8C6A !important;
}
/* ---- Shared dropdown ---- */
#id_EDnGrxR ul.secondLevel,
#id_b7E38S1 ul.secondLevel {
background: #ffffff !important;
border: 1px solid #eaeaea !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
padding: 6px 0 !important;
list-style: none !important;
margin: 0 !important;
}
#id_EDnGrxR ul.secondLevel .item a,
#id_b7E38S1 ul.secondLevel .item a {
color: #0B1226 !important;
font-size: 14px !important;
font-family: 'Space Grotesk', sans-serif !important;
padding: 9px 18px !important;
display: block !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background 0.15s, color 0.15s !important;
}
#id_EDnGrxR ul.secondLevel .item a:hover,
#id_b7E38S1 ul.secondLevel .item a:hover {
color: #1A8C6A !important;
background: #F4F9F6 !important;
}
/* ---- Profile dropdown positioning ---- */
.pia-profile-wrap {
position: relative !important;
display: inline-block !important;
}
#id_b7E38S1 ul.secondLevel {
display: none !important;
position: absolute !important;
top: 100% !important;
right: 0 !important;
min-width: 180px !important;
z-index: 1001 !important;
padding-top: 14px !important;
}
#id_b7E38S1 .pia-profile-wrap:hover ul.secondLevel { display: block !important; }
.pia-burger-btn { display: none !important; }
#pia-mobile-menu { display: none; }
@media (max-width: 768px) {
#pia-auth-desktop { display: none !important; }
.pia-burger-btn { display: flex !important; }
}
/* ============ CONTENT CARDS ============ */
.pia-card {
background: #fff;
border: 1px solid var(--pia-border);
border-radius: var(--pia-radius);
padding: 26px !important;
}
.pia-tint { background: var(--pia-tint) !important; }
.WaGadgetBlog .blogPostItem, .WaGadgetRecentBlogPosts li {
background: #fff;
border: 1px solid var(--pia-border);
border-radius: var(--pia-radius);
padding: 22px;
margin-bottom: 16px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.WaGadgetBlog .blogPostItem:hover, .WaGadgetRecentBlogPosts li:hover {
border-color: var(--pia-primary);
box-shadow: 0 12px 36px -20px rgba(11, 18, 38, 0.3);
}
.WaGadgetEventsList .eventListItem {
border-radius: var(--pia-radius);
border: 1px solid var(--pia-border);
background: #fff;
}
/* ============ FORMS ============ */
.fieldContainer input[type=text], .fieldContainer input[type=password],
.fieldContainer textarea, .fieldContainer select {
border: 1px solid rgba(13, 27, 62, 0.20) !important;
border-radius: 8px !important;
padding: 10px 14px !important;
background: #fff !important;
font-family: var(--pia-font-body) !important;
transition: border-color .2s, box-shadow .2s;
}
.fieldContainer input:focus, .fieldContainer textarea:focus {
border-color: var(--pia-primary) !important;
box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.15);
outline: none;
}
/* ============ FOOTER ============ */
.zoneFooter1, .zoneFooter2, .zoneFooter3 {
background: var(--pia-ink) !important;
color: rgba(255, 255, 255, 0.72);
}
.zoneFooter1 {
border-top: 3px solid transparent;
border-image: var(--pia-spectrum) 1;
}
.zoneFooter1 a, .zoneFooter2 a, .zoneFooter3 a { color: var(--pia-gold); }
.zoneFooter1 p, .zoneFooter2 p, .zoneFooter3 p { color: rgba(255,255,255,0.72) !important; }
/* ============ ACCESSIBILITY ============ */
a:focus-visible, button:focus-visible, .stylizedButton:focus-visible {
outline: 3px solid var(--pia-primary);
outline-offset: 2px;
}
/* ============================================================
WILDAPRICOT MODULE CSS OVERRIDES
============================================================ */
/* ---- 1. EVENTS CALENDAR ---- */
.WaGadgetEventCalendar { font-family: var(--pia-font-body) !important; }
.WaGadgetEventCalendar .calendarHeader,
.WaGadgetEventCalendar .calendarNavigation {
font-family: var(--pia-font-display) !important;
font-weight: 600;
color: var(--pia-ink) !important;
background: transparent !important;
border-bottom: 1px solid var(--pia-border);
padding: 14px 0;
}
.WaGadgetEventCalendar .calendarNavigation a {
color: var(--pia-primary) !important;
font-weight: 600;
text-decoration: none;
background: var(--pia-tint);
border: 1px solid var(--pia-border);
border-radius: 6px;
padding: 4px 12px;
transition: background .2s ease;
}
.WaGadgetEventCalendar .calendarNavigation a:hover {
background: var(--pia-primary) !important;
color: #fff !important;
border-color: var(--pia-primary);
}
.WaGadgetEventCalendar .calendarDayHeader th,
.WaGadgetEventCalendar table th {
font-family: var(--pia-font-display) !important;
font-size: 12px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--pia-muted) !important;
background: var(--pia-tint) !important;
padding: 10px 6px;
border: none !important;
}
.WaGadgetEventCalendar td.calendarDay,
.WaGadgetEventCalendar td {
background: #fff !important;
border: 1px solid var(--pia-border) !important;
vertical-align: top;
padding: 8px 10px !important;
min-height: 80px;
font-size: 13px;
color: var(--pia-body-col);
transition: background .15s ease;
}
.WaGadgetEventCalendar td.calendarDay:hover { background: var(--pia-tint) !important; }
.WaGadgetEventCalendar td.calendarDay .dayNumber,
.WaGadgetEventCalendar .dayNumber {
font-family: var(--pia-font-display) !important;
font-size: 14px; font-weight: 600; color: var(--pia-ink);
}
.WaGadgetEventCalendar td.calendarToday,
.WaGadgetEventCalendar .calendarToday {
background: rgba(30, 79, 216, 0.06) !important;
border-color: var(--pia-primary) !important;
}
.WaGadgetEventCalendar td.calendarToday .dayNumber { color: var(--pia-primary); }
.WaGadgetEventCalendar td.calendarOtherMonth {
background: var(--pia-tint) !important;
opacity: .55;
}
.WaGadgetEventCalendar .eventCalendarEvent,
.WaGadgetEventCalendar .calendarEvent {
display: block; font-size: 11.5px; font-weight: 500;
color: var(--pia-paper) !important;
background: var(--pia-primary) !important;
border-radius: 4px; padding: 2px 6px; margin: 3px 0;
text-decoration: none !important;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: background .15s ease;
}
.WaGadgetEventCalendar .eventCalendarEvent:hover { background: var(--pia-ink) !important; }
.WaGadgetEventCalendar .calendarMoreEvents a {
font-size: 11px; color: var(--pia-primary) !important; font-weight: 600;
}
/* ---- 2. EVENTS LIST ---- */
.WaGadgetEventsList { font-family: var(--pia-font-body) !important; }
.WaGadgetEventsList .gadgetTitle,
.WaGadgetEventsList h2 { font-family: var(--pia-font-display) !important; color: var(--pia-ink) !important; }
.WaGadgetEventsList .eventListItem {
display: flex; align-items: flex-start; gap: 20px;
border-radius: var(--pia-radius) !important;
border: 1px solid var(--pia-border) !important;
background: #fff !important;
padding: 20px 24px !important; margin-bottom: 14px !important;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.WaGadgetEventsList .eventListItem:hover {
border-color: var(--pia-primary) !important;
box-shadow: 0 12px 36px -20px rgba(11, 18, 38, 0.28);
transform: translateY(-2px);
}
.WaGadgetEventsList .eventListDate,
.WaGadgetEventsList .dateBox {
flex-shrink: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center;
width: 58px; min-height: 64px;
background: var(--pia-surface) !important;
border-radius: 8px; color: #fff !important;
font-family: var(--pia-font-display) !important;
text-align: center; padding: 8px 6px;
}
.WaGadgetEventsList .eventListDate .day,
.WaGadgetEventsList .dateBox .day,
.WaGadgetEventsList .eventListDate strong {
display: block; font-size: 22px; font-weight: 700;
line-height: 1; color: var(--pia-gold) !important;
}
.WaGadgetEventsList .eventListDate .month,
.WaGadgetEventsList .dateBox .month {
font-size: 11px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.75) !important; margin-top: 3px;
}
.WaGadgetEventsList .eventListDetails,
.WaGadgetEventsList .eventDetails { flex: 1; min-width: 0; }
.WaGadgetEventsList .eventListTitle a,
.WaGadgetEventsList .eventName a {
font-family: var(--pia-font-display) !important;
font-size: 16.5px; font-weight: 600;
color: var(--pia-ink) !important;
text-decoration: none; display: block; margin-bottom: 5px;
transition: color .15s ease;
}
.WaGadgetEventsList .eventListTitle a:hover,
.WaGadgetEventsList .eventName a:hover { color: var(--pia-primary) !important; }
.WaGadgetEventsList .eventListLocation,
.WaGadgetEventsList .eventLocation,
.WaGadgetEventsList .eventListTime { font-size: 13px; color: var(--pia-muted) !important; margin: 2px 0; }
.WaGadgetEventsList .eventListDescription,
.WaGadgetEventsList .eventDescription {
font-size: 14px; color: var(--pia-body-col) !important; line-height: 1.6; margin-top: 8px;
}
.WaGadgetEventsList .eventListRegistration a,
.WaGadgetEventsList .registerLink a {
display: inline-block;
font-family: var(--pia-font-display) !important;
font-size: 13px; font-weight: 600;
background: var(--pia-gold); color: var(--pia-ink) !important;
text-decoration: none; padding: 7px 16px; border-radius: 6px;
margin-top: 10px; transition: background .2s ease;
}
.WaGadgetEventsList .eventListRegistration a:hover { background: var(--pia-gold-deep); }
.WaGadgetEventsList .eventFilter,
.WaGadgetEventsList .filterBar {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 20px; padding: 14px 0;
border-bottom: 1px solid var(--pia-border);
}
.WaGadgetEventsList .eventFilter select,
.WaGadgetEventsList .filterBar select {
font-family: var(--pia-font-body) !important; font-size: 13px;
border: 1px solid var(--pia-border) !important; border-radius: 8px;
padding: 8px 14px !important; background: #fff !important;
color: var(--pia-ink) !important; cursor: pointer;
}
/* ---- 3. MEMBER DIRECTORY ---- */
.WaGadgetMemberDirectory { font-family: var(--pia-font-body) !important; }
.pia-directory-header {
background: var(--pia-surface);
padding: clamp(32px, 5vw, 48px) 28px;
border-top: 3px solid transparent;
border-image: var(--pia-spectrum) 1;
margin-bottom: 32px;
}
.pia-directory-header h2 { font-family: var(--pia-font-display) !important; color: #fff !important; margin: 0 0 8px; }
.pia-directory-header h2::after { display: none !important; }
.pia-directory-header p { color: rgba(255,255,255,.72) !important; font-size: 15px; margin: 0; }
.WaGadgetMemberDirectory .memberSearch,
.WaGadgetMemberDirectory .directorySearch,
.WaGadgetMemberDirectory .searchPanel {
display: flex; flex-wrap: wrap; gap: 12px;
padding: 16px 0; margin-bottom: 24px;
border-bottom: 1px solid var(--pia-border);
}
.WaGadgetMemberDirectory .memberSearch input[type=text],
.WaGadgetMemberDirectory .directorySearch input[type=text],
.WaGadgetMemberDirectory input.searchField {
font-family: var(--pia-font-body) !important; font-size: 14px;
border: 1px solid var(--pia-border) !important; border-radius: 8px !important;
padding: 10px 16px !important; background: #fff !important;
color: var(--pia-ink) !important; flex: 1; min-width: 220px;
transition: border-color .2s, box-shadow .2s;
}
.WaGadgetMemberDirectory input.searchField:focus {
border-color: var(--pia-primary) !important;
box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.12); outline: none;
}
.WaGadgetMemberDirectory .searchButton,
.WaGadgetMemberDirectory .memberSearch input[type=submit] {
font-family: var(--pia-font-display) !important; font-weight: 600;
background: var(--pia-gold) !important; color: var(--pia-ink) !important;
border: none !important; border-radius: 8px !important;
padding: 10px 22px !important; cursor: pointer; transition: background .2s ease;
}
.WaGadgetMemberDirectory .searchButton:hover { background: var(--pia-gold-deep) !important; }
.WaGadgetMemberDirectory .filterChips,
.WaGadgetMemberDirectory .categoryFilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.WaGadgetMemberDirectory .filterChip,
.WaGadgetMemberDirectory .categoryFilter a {
font-family: var(--pia-font-display) !important; font-size: 12.5px; font-weight: 500;
background: var(--pia-tint); color: var(--pia-body-col) !important;
border: 1px solid var(--pia-border); border-radius: 100px;
padding: 5px 14px; text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
}
.WaGadgetMemberDirectory .filterChip:hover,
.WaGadgetMemberDirectory .categoryFilter a:hover,
.WaGadgetMemberDirectory .filterChip.active,
.WaGadgetMemberDirectory .categoryFilter a.active {
background: var(--pia-primary) !important; border-color: var(--pia-primary); color: #fff !important;
}
.WaGadgetMemberDirectory .memberList,
.WaGadgetMemberDirectory .directoryList {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.WaGadgetMemberDirectory .memberListItem,
.WaGadgetMemberDirectory .directoryItem {
background: #fff !important; border: 1px solid var(--pia-border) !important;
border-radius: var(--pia-radius) !important; padding: 24px !important;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.WaGadgetMemberDirectory .memberListItem:hover,
.WaGadgetMemberDirectory .directoryItem:hover {
border-color: var(--pia-primary) !important;
box-shadow: 0 14px 40px -22px rgba(11, 18, 38, 0.32);
transform: translateY(-2px);
}
.WaGadgetMemberDirectory .memberListItem::before,
.WaGadgetMemberDirectory .directoryItem::before {
content: ""; display: block; width: 34px; height: 3px;
border-radius: 2px; background: var(--pia-cyan); margin-bottom: 16px;
}
.WaGadgetMemberDirectory .memberName,
.WaGadgetMemberDirectory .memberOrg,
.WaGadgetMemberDirectory .directoryItem .orgName {
font-family: var(--pia-font-display) !important; font-size: 16px; font-weight: 600;
color: var(--pia-ink) !important; margin: 0 0 6px;
}
.WaGadgetMemberDirectory .memberName a,
.WaGadgetMemberDirectory .directoryItem .orgName a { color: var(--pia-ink) !important; text-decoration: none; }
.WaGadgetMemberDirectory .memberName a:hover { color: var(--pia-primary) !important; }
.WaGadgetMemberDirectory .memberType,
.WaGadgetMemberDirectory .memberLevel {
display: inline-block; font-size: 11px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--pia-primary) !important; background: rgba(30, 79, 216, 0.08);
border-radius: 4px; padding: 2px 8px; margin-bottom: 10px;
}
.WaGadgetMemberDirectory .memberInfo,
.WaGadgetMemberDirectory .memberDetails,
.WaGadgetMemberDirectory .directoryItem .contactInfo {
font-size: 13.5px; color: var(--pia-body-col) !important; line-height: 1.6;
}
.WaGadgetMemberDirectory .memberInfo a { color: var(--pia-primary) !important; }
.WaGadgetMemberDirectory .memberPhoto img,
.WaGadgetMemberDirectory .memberLogo img {
border-radius: 6px; border: 1px solid var(--pia-border);
max-width: 100%; height: auto; margin-bottom: 12px;
}
.WaGadgetMemberDirectory .alphabetFilter,
.WaGadgetMemberDirectory .alphaNav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; }
.WaGadgetMemberDirectory .alphabetFilter a,
.WaGadgetMemberDirectory .alphaNav a {
font-family: var(--pia-font-display) !important; font-size: 13px; font-weight: 600;
color: var(--pia-body-col) !important; background: var(--pia-tint);
border: 1px solid var(--pia-border); border-radius: 5px;
padding: 4px 9px; text-decoration: none; transition: all .15s ease;
}
.WaGadgetMemberDirectory .alphabetFilter a:hover,
.WaGadgetMemberDirectory .alphaNav a:hover {
background: var(--pia-primary); border-color: var(--pia-primary); color: #fff !important;
}
/* ---- 4. BLOG / NEWS ---- */
.WaGadgetBlog { font-family: var(--pia-font-body) !important; }
.WaGadgetBlog .blogPostItem:first-child { border-left: 3px solid var(--pia-cyan) !important; }
.WaGadgetBlog .blogPostItem { position: relative; overflow: hidden; }
.WaGadgetBlog .blogPostTag,
.WaGadgetBlog .blogCategory,
.WaGadgetBlog .postCategory {
display: inline-block;
font-family: var(--pia-font-display) !important; font-size: 11px; font-weight: 600;
letter-spacing: .10em; text-transform: uppercase;
color: var(--pia-primary) !important; background: rgba(30, 79, 216, 0.08);
border-radius: 4px; padding: 2px 8px; margin-bottom: 10px;
}
.WaGadgetBlog .blogPostTitle,
.WaGadgetBlog .blogPostItem h2,
.WaGadgetBlog .blogPostItem h3 {
font-family: var(--pia-font-display) !important;
font-size: clamp(17px, 2vw, 20px); font-weight: 600;
color: var(--pia-ink) !important; margin: 0 0 8px; line-height: 1.25;
}
.WaGadgetBlog .blogPostTitle a { color: var(--pia-ink) !important; text-decoration: none; transition: color .15s ease; }
.WaGadgetBlog .blogPostTitle a:hover { color: var(--pia-primary) !important; }
.WaGadgetBlog .blogPostMeta,
.WaGadgetBlog .blogPostDate,
.WaGadgetBlog .blogPostAuthor { font-size: 12.5px; color: var(--pia-muted) !important; margin-bottom: 10px; }
.WaGadgetBlog .blogPostExcerpt,
.WaGadgetBlog .blogPostBody { font-size: 14.5px; line-height: 1.7; color: var(--pia-body-col) !important; }
.WaGadgetBlog .blogPostReadMore a,
.WaGadgetBlog .readMore a {
font-family: var(--pia-font-display) !important; font-size: 13.5px; font-weight: 600;
color: var(--pia-primary) !important; text-decoration: none;
display: inline-flex; align-items: center; gap: 4px;
margin-top: 12px; transition: color .15s ease;
}
/* Base colour is already forced to green further down (Deep Forest
override), so hover keeps the same green and adds an underline for
feedback instead of a colour jump that wouldn't be visible. */
.WaGadgetBlog .blogPostReadMore a:hover { color: var(--pia-primary) !important; text-decoration: underline !important; }
.WaGadgetBlog .blogPostReadMore a::after { content: "→"; }
.WaGadgetBlog .blogPagination,
.WaGadgetBlog .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.WaGadgetBlog .blogPagination a,
.WaGadgetBlog .pagination a,
.WaGadgetBlog .pagination span {
font-family: var(--pia-font-display) !important; font-size: 13px; font-weight: 600;
border: 1px solid var(--pia-border); border-radius: 6px; padding: 6px 12px;
text-decoration: none; color: var(--pia-body-col) !important;
background: #fff; transition: all .15s ease;
}
.WaGadgetBlog .blogPagination a:hover,
.WaGadgetBlog .pagination a:hover {
background: var(--pia-primary); border-color: var(--pia-primary); color: #fff !important;
}
.WaGadgetBlog .blogPagination .current,
.WaGadgetBlog .pagination .currentPage {
background: var(--pia-ink) !important; border-color: var(--pia-ink) !important; color: #fff !important;
}
.WaGadgetRecentBlogPosts { font-family: var(--pia-font-body) !important; }
.WaGadgetRecentBlogPosts ul { list-style: none; padding: 0; margin: 0; }
.WaGadgetRecentBlogPosts li {
border-radius: var(--pia-radius); border: 1px solid var(--pia-border);
background: #fff; padding: 16px 18px; margin-bottom: 12px;
transition: border-color .2s ease;
}
.WaGadgetRecentBlogPosts li:hover { border-color: var(--pia-primary); }
.WaGadgetRecentBlogPosts li a {
font-family: var(--pia-font-display) !important; font-size: 14px; font-weight: 500;
color: var(--pia-ink) !important; text-decoration: none;
}
.WaGadgetRecentBlogPosts li a:hover { color: var(--pia-primary) !important; }
.WaGadgetRecentBlogPosts .postDate { display: block; font-size: 12px; color: var(--pia-muted) !important; margin-top: 3px; }
/* ---- 5. MEMBERSHIP APPLICATION ----
Generic rules for the WA membership wizard. The /join page
specific styling lives in section 22 (PIA JOIN PAGE). */
.WaGadgetMembershipApplication { font-family: var(--pia-font-body) !important; max-width: 860px; margin: 0 auto; }
.WaGadgetMembershipApplication h1,
.WaGadgetMembershipApplication h2 { font-family: var(--pia-font-display) !important; color: var(--pia-ink) !important; }
.WaGadgetMembershipApplication .membershipSteps,
.WaGadgetMembershipApplication .wizardSteps,
.WaGadgetMembershipApplication .progressBar {
display: flex; gap: 0; margin-bottom: 36px;
border-radius: 8px; overflow: hidden; border: 1px solid var(--pia-border);
}
.WaGadgetMembershipApplication .membershipStep,
.WaGadgetMembershipApplication .wizardStep {
flex: 1; text-align: center; padding: 12px 8px;
font-family: var(--pia-font-display) !important; font-size: 13px; font-weight: 500;
background: var(--pia-tint); color: var(--pia-muted) !important;
border-right: 1px solid var(--pia-border);
}
.WaGadgetMembershipApplication .membershipStep:last-child,
.WaGadgetMembershipApplication .wizardStep:last-child { border-right: none; }
.WaGadgetMembershipApplication .membershipStep.active,
.WaGadgetMembershipApplication .wizardStep.current {
background: var(--pia-ink) !important; color: var(--pia-gold) !important;
}
.WaGadgetMembershipApplication .membershipStep.completed,
.WaGadgetMembershipApplication .wizardStep.done {
background: var(--pia-primary) !important; color: #fff !important;
}
.WaGadgetMembershipApplication .membershipLevelList {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px;
}
.WaGadgetMembershipApplication .membershipLevelItem {
background: #fff !important; border: 2px solid var(--pia-border) !important;
border-radius: var(--pia-radius) !important; padding: 22px 20px !important;
cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.WaGadgetMembershipApplication .membershipLevelItem:hover { border-color: var(--pia-primary) !important; }
.WaGadgetMembershipApplication .membershipLevelItem.selected,
.WaGadgetMembershipApplication .membershipLevelItem input[type=radio]:checked + label {
border-color: var(--pia-primary) !important; box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.15);
}
.WaGadgetMembershipApplication .membershipLevelItem::before {
content: ""; display: block; width: 34px; height: 3px;
border-radius: 2px; background: var(--pia-spectrum); margin-bottom: 14px;
}
.WaGadgetMembershipApplication .membershipLevelHeader,
.WaGadgetMembershipApplication .levelName {
font-family: var(--pia-font-display) !important; font-size: 16px; font-weight: 600;
color: var(--pia-ink) !important; margin: 0 0 6px;
}
.WaGadgetMembershipApplication .membershipLevelPrice,
.WaGadgetMembershipApplication .levelPrice {
font-family: var(--pia-font-display) !important; font-size: 20px; font-weight: 700;
color: var(--pia-primary) !important; margin-bottom: 8px;
}
.WaGadgetMembershipApplication .membershipLevelDescription,
.WaGadgetMembershipApplication .levelDescription {
font-size: 13.5px; color: var(--pia-body-col) !important; line-height: 1.55;
}
.WaGadgetMembershipApplication .formSection,
.WaGadgetMembershipApplication .fieldSection {
background: var(--pia-tint); border: 1px solid var(--pia-border);
border-radius: var(--pia-radius); padding: 24px; margin-bottom: 20px;
}
.WaGadgetMembershipApplication .formSection h3,
.WaGadgetMembershipApplication .sectionTitle {
font-family: var(--pia-font-display) !important; font-size: 15px; font-weight: 600;
color: var(--pia-ink) !important; margin: 0 0 16px; padding-bottom: 10px;
border-bottom: 1px solid var(--pia-border);
}
.WaGadgetMembershipApplication label,
.WaGadgetMembershipApplication .fieldLabel {
font-family: var(--pia-font-body) !important; font-size: 13.5px; font-weight: 500;
color: var(--pia-ink) !important; display: block; margin-bottom: 5px;
}
.WaGadgetMembershipApplication .required,
.WaGadgetMembershipApplication .fieldRequired { color: #E03E3E !important; margin-left: 2px; }
.WaGadgetMembershipApplication .formNavigation,
.WaGadgetMembershipApplication .wizardNavigation {
display: flex; justify-content: space-between; align-items: center;
margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--pia-border);
}
.WaGadgetMembershipApplication .prevButton,
.WaGadgetMembershipApplication .backButton {
font-family: var(--pia-font-display) !important; font-size: 14px; font-weight: 600;
background: var(--pia-tint) !important; color: var(--pia-ink) !important;
border: 1px solid var(--pia-border) !important; border-radius: 8px !important;
padding: 11px 22px !important; cursor: pointer; transition: background .2s ease;
}
.WaGadgetMembershipApplication .prevButton:hover { background: var(--pia-border) !important; }
.WaGadgetMembershipApplication .nextButton,
.WaGadgetMembershipApplication .submitButton {
font-family: var(--pia-font-display) !important; font-size: 14px; font-weight: 600;
background: var(--pia-gold) !important; color: var(--pia-ink) !important;
border: none !important; border-radius: 8px !important; padding: 11px 28px !important;
cursor: pointer; transition: background .2s ease, transform .15s ease;
}
.WaGadgetMembershipApplication .nextButton:hover,
.WaGadgetMembershipApplication .submitButton:hover {
background: var(--pia-gold-deep) !important; transform: translateY(-1px);
}
.WaGadgetMembershipApplication .confirmationMessage,
.WaGadgetMembershipApplication .successMessage {
background: rgba(30, 79, 216, 0.06);
border: 1px solid rgba(30, 79, 216, 0.20);
border-left: 4px solid var(--pia-primary);
border-radius: var(--pia-radius); padding: 24px 28px;
font-size: 15px; color: var(--pia-ink) !important; line-height: 1.6;
}
/* ============================================================
HERO GADGET
============================================================ */
.pia-hero { position: relative; overflow: hidden; background: #0B1226; font-family: 'Inter', sans-serif; }
.pia-orb-layer { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.pia-orb {
position: absolute; border-radius: 50%; filter: blur(60px);
animation: piaDrift 16s ease-in-out infinite alternate;
}
@keyframes piaDrift {
from { transform: translate(0,0) scale(1); }
to { transform: translate(-34px,24px) scale(1.1); }
}
.pia-photon {
position: absolute; width: 14px; height: 14px; border-radius: 50%;
background: #fff; opacity: 0;
box-shadow: 0 0 18px 6px rgba(79,227,255,.85), 0 0 50px 22px rgba(45,91,255,.45);
pointer-events: none; will-change: transform, opacity; transition: opacity .4s ease;
}
.pia-beam-in {
position: absolute; top: 64%; left: 0; width: 46%; height: 2px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55));
transform: rotate(2deg); transform-origin: right center; pointer-events: none;
}
.pia-beam-out {
position: absolute; top: 64%; left: 46%; width: 54%; height: 2px;
transform-origin: left center; opacity: .8; pointer-events: none;
}
.pia-vignette {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, #0B1226 30%, rgba(11,18,38,.42) 52%, rgba(11,18,38,0) 75%);
}
.pia-spectrum-edge {
position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: linear-gradient(90deg, #4FE3FF, #2D5BFF 35%, #A78BFA 65%, #F5B82E);
}
.pia-hero-inner {
position: relative; max-width: 1180px; margin: 0 auto;
padding: clamp(64px, 9vw, 96px) 28px clamp(60px, 8vw, 88px);
}
.pia-gold-rule { width: 56px; height: 3px; background: #F5B82E; border-radius: 2px; margin-bottom: 26px; }
.pia-hero-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(32px, 4.6vw, 46px); font-weight: 700;
line-height: 1.12; color: #fff !important; letter-spacing: -0.02em; margin: 0 0 20px;
}
.pia-hero-sub { color: rgba(255,255,255,.74) !important; font-size: 17px; line-height: 1.65; max-width: 58ch; margin: 0 0 32px; }
.pia-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.pia-stats { background: #F3F6FC; border-bottom: 1px solid #E3E9F4; }
.pia-stats-inner {
max-width: 1180px; margin: 0 auto; padding: 26px 28px;
display: flex; gap: clamp(28px, 6vw, 70px); flex-wrap: wrap;
}
.pia-stats strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 26px; color: #0B1226; }
.pia-stats span { font-size: 13px; color: #5A6786; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 767px) {
#id_mU5tEsu .WaLayoutTable,
#id_mU5tEsu .WaLayoutTable tbody,
#id_mU5tEsu .WaLayoutTable tr {
display: flex !important;
align-items: center !important;
width: 100% !important;
}
#id_rdwJ1qM {
flex: 1 !important;
width: auto !important;
padding: 12px 0 12px 20px !important;
}
#id_v1vW39L,
#id_mU5tEsu .WaLayoutSeparator { display: none !important; }
#id_HHgnNmr {
flex-shrink: 0 !important;
width: auto !important;
padding: 12px 20px 12px 0 !important;
margin-top: 0 !important;
}
#id_b7E38S1 .pia-profile-wrap,
#id_b7E38S1 > a.pia-btn-gold { display: none !important; }
.pia-burger-btn {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 5px !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 8px !important;
}
.pia-burger-btn span {
display: block !important;
width: 24px !important;
height: 2px !important;
background: #0B1226 !important;
border-radius: 2px !important;
}
#pia-mobile-menu {
position: fixed !important;
inset: 0 !important;
background: #0B1226 !important;
z-index: 9999 !important;
padding: 80px 32px 40px !important;
overflow-y: auto !important;
display: none;
}
#pia-mobile-menu.pia-open { display: block !important; }
.pia-mobile-close {
position: absolute !important;
top: 20px !important; right: 20px !important;
background: none !important; border: none !important;
color: #ffffff !important; font-size: 32px !important;
line-height: 1 !important; cursor: pointer !important; padding: 4px !important;
}
#pia-mobile-nav a {
display: block !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 18px !important; font-weight: 600 !important;
color: #ffffff !important; text-decoration: none !important;
padding: 16px 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
#pia-mobile-nav a.pia-sub {
font-size: 15px !important; font-weight: 400 !important;
padding-left: 20px !important; color: rgba(255,255,255,0.7) !important;
}
/* Left gold here on purpose: mobile menu background is the same dark
green, so a green hover would barely be visible against it. */
#pia-mobile-nav a:hover,
#pia-mobile-nav a.pia-sub:hover { color: #F5B82E !important; }
#pia-mobile-auth {
margin-top: 32px !important;
padding-top: 32px !important;
}
#pia-mobile-auth a {
display: block !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #4FE3FF !important;
text-decoration: none !important;
padding: 14px 0 !important;
}
#pia-mobile-auth a:last-child { border-bottom: none !important; }
#pia-mobile-auth a:hover { color: #F5B82E !important; }
}
#pia-mobile-auth .pia-mobile-name {
display: block !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #F5B82E !important;
padding: 0 0 16px !important;
letter-spacing: 0.01em !important;
}
@media (max-width: 640px) {
.WaGadgetEventsList .eventListItem { flex-direction: column; gap: 12px; }
.WaGadgetEventsList .eventListDate,
.WaGadgetEventsList .dateBox {
width: 100%; flex-direction: row; min-height: auto; gap: 8px; padding: 10px 14px;
}
.WaGadgetMemberDirectory .memberList,
.WaGadgetMemberDirectory .directoryList { grid-template-columns: 1fr; }
.WaGadgetMembershipApplication .membershipLevelList { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
.pia-orb { animation: none; }
.pia-photon { display: none; }
.WaGadgetEventsList .eventListItem,
.WaGadgetMemberDirectory .memberListItem,
.WaGadgetBlog .blogPostItem,
.WaGadgetMembershipApplication .membershipLevelItem {
transition: none !important; transform: none !important;
}
}
#id_z6amMgK img {
height: 68px !important;
width: auto !important;
max-width: none !important;
}
/* ============ INNER PAGE HERO ============ */
.pia-ph-wrap {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: var(--pia-ink);
font-family: var(--pia-font-body);
box-sizing: border-box;
}
.pia-ph-inner {
max-width: 1180px;
margin: 0 auto;
padding: 52px 28px 48px;
}
.pia-ph-rule {
width: 56px;
height: 3px;
background: var(--pia-gold);
border-radius: 2px;
margin-bottom: 0px;
}
.pia-ph-title {
font-family: var(--pia-font-display) !important;
font-size: clamp(28px, 3.8vw, 38px);
font-weight: 700 !important;
color: #ffffff !important;
letter-spacing: -0.02em;
line-height: 1.12;
margin: 0 0 14px !important;
}
.pia-ph-title::after { display: none !important; }
.pia-ph-sub {
color: rgba(255,255,255,0.70) !important;
font-size: 16px;
line-height: 1.7;
max-width: 76ch;
margin: 0 !important;
}
.pia-ph-edge {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--pia-spectrum);
}
/* ============ BOARD OF DIRECTORS ============ */
.pia-bod-section {
background: var(--pia-tint);
font-family: var(--pia-font-body);
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
}
.pia-bod-inner {
max-width: 900px;
margin: 0 auto;
padding: 44px 28px 60px;
}
.pia-bod-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.pia-bod-card {
background: var(--pia-paper);
border-radius: var(--pia-radius);
border: 1px solid var(--pia-border);
border-top: 3px solid var(--pia-cyan);
box-shadow: 0 2px 12px rgba(11,18,38,0.06);
padding: 30px;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease;
}
.pia-bod-card:hover { box-shadow: 0 8px 28px rgba(11,18,38,0.12); }
.pia-bod-card-top {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 20px;
}
.pia-bod-photo {
width: 96px; height: 96px; border-radius: 50%;
object-fit: cover; border: none;
flex-shrink: 0; background: #FFFFFF; display: block;
}
.pia-bod-initials {
width: 96px; height: 96px; border-radius: 50%;
border: none;
background: var(--pia-ink); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--pia-font-display); font-size: 26px; font-weight: 700;
color: var(--pia-cyan);
}
.pia-bod-meta { flex: 1; min-width: 0; }
.pia-bod-name {
font-family: var(--pia-font-display); font-size: 17px; font-weight: 700;
color: var(--pia-ink); line-height: 1.2; margin: 0 0 3px !important;
}
.pia-bod-name::after { display: none !important; }
.pia-bod-phonetic { font-size: 12px; color: var(--pia-muted); font-style: italic; margin: 0 0 7px !important; }
.pia-bod-title {
font-family: var(--pia-font-display); font-size: 12.5px;
color: var(--pia-primary); font-weight: 500; line-height: 1.45; margin: 0 !important;
}
.pia-bod-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pia-bod-pronounce {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--pia-gold); border: none; border-radius: 8px;
color: var(--pia-ink); font-family: var(--pia-font-display);
font-size: 11.5px; font-weight: 600; padding: 6px 14px;
cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
}
.pia-bod-pronounce:hover { background: var(--pia-gold-deep); transform: translateY(-1px); }
.pia-bod-pronounce svg { width: 11px; height: 11px; flex-shrink: 0; }
.pia-bod-linkedin {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 1px solid var(--pia-ink); border-radius: 8px;
color: var(--pia-ink); font-family: var(--pia-font-display);
font-size: 11.5px; font-weight: 500; padding: 6px 14px;
text-decoration: none; transition: background 0.15s ease;
}
.pia-bod-linkedin:hover { background: rgba(11,18,38,0.06); }
.pia-bod-linkedin svg { width: 11px; height: 11px; flex-shrink: 0; }
.pia-bod-bio {
font-size: 13.5px; color: var(--pia-body-col); line-height: 1.75;
border-top: 1px solid var(--pia-border); padding-top: 18px;
margin: 0 !important; flex: 1;
}
@media (max-width: 700px) {
.pia-bod-grid { grid-template-columns: 1fr; }
}
/* ============ CONTENT COLUMN WIDTH ============ */
.WaGadgetContentEditor,
.WaGadgetContentEditor > div,
.zoneContent .WaPlaceHolder > div {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ============ PIA FOOTER ============ */
.pia-footer *,
.pia-footer *::before,
.pia-footer *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.pia-footer {
position: relative;
background: #0B1226;
overflow: hidden;
font-family: 'Space Grotesk', sans-serif;
width: 100%;
}
.pia-footer__orb-layer {
position: absolute;
inset: 0;
pointer-events: none;
will-change: transform;
}
.pia-footer__orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
animation: piaOrbDrift 14s ease-in-out infinite alternate;
}
@keyframes piaOrbDrift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-22px, 14px) scale(1.07); }
}
.pia-footer__photon {
position: absolute;
width: 14px; height: 14px; border-radius: 50%;
background: #fff; opacity: 0;
pointer-events: none; will-change: transform, opacity;
transition: opacity 0.3s ease;
box-shadow: 0 0 18px 6px rgba(79, 227, 255, 0.85), 0 0 50px 22px rgba(45, 91, 255, 0.45);
z-index: 1;
}
.pia-footer__vignette {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, #0B1226 28%, rgba(11, 18, 38, 0.55) 50%, rgba(11, 18, 38, 0) 74%);
z-index: 2;
}
.pia-footer__beam {
position: absolute; height: 2px; pointer-events: none; bottom: 100px; z-index: 1;
}
.pia-footer__beam--in {
left: 0; width: 28%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35));
transform: rotate(-1deg); transform-origin: right center;
}
.pia-footer__beam--cyan,
.pia-footer__beam--blue,
.pia-footer__beam--purple,
.pia-footer__beam--gold {
left: 28%; width: 72%; opacity: 0.7; transform-origin: left center;
}
.pia-footer__beam--cyan { background: linear-gradient(90deg, #4FE3FF, transparent 85%); transform: rotate(-9deg); }
.pia-footer__beam--blue { background: linear-gradient(90deg, #2D5BFF, transparent 85%); transform: rotate(-3deg); }
.pia-footer__beam--purple { background: linear-gradient(90deg, #A78BFA, transparent 85%); transform: rotate(4deg); }
.pia-footer__beam--gold { background: linear-gradient(90deg, #F5B82E, transparent 85%); transform: rotate(11deg); }
.pia-footer__inner {
position: relative; z-index: 3;
padding: 52px 48px 28px;
max-width: 1180px; margin-left: auto; margin-right: auto;
}
.pia-footer__grid {
display: grid; grid-template-columns: 5fr 4fr;
gap: 36px; margin-bottom: 32px;
}
.pia-footer__brand { margin-bottom: 26px; }
.pia-footer__brand-label {
display: block; font-size: 15px; letter-spacing: 0.12em;
color: #F5B82E; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;
}
.pia-footer__brand-rule {
width: 28px; height: 1.5px;
background: rgba(245, 184, 46, 0.35); margin-bottom: 12px;
}
.pia-footer__brand-tagline { font-size: 16px; color: rgba(255, 255, 255, 0.78); line-height: 1.65; }
.pia-spectrum {
background: rgba(255, 255, 255, 0.04);
border: 0.5px solid rgba(255, 255, 255, 0.09);
border-radius: 10px; padding: 18px;
}
.pia-spectrum__header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pia-spectrum__bar {
display: flex; width: 22px; height: 3px;
border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.pia-spectrum__bar span { flex: 1; }
.pia-spectrum__bar span:nth-child(1) { background: #4FE3FF; }
.pia-spectrum__bar span:nth-child(2) { background: #2D5BFF; }
.pia-spectrum__bar span:nth-child(3) { background: #A78BFA; }
.pia-spectrum__bar span:nth-child(4) { background: #F5B82E; }
.pia-spectrum__name { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: 0.08em; }
.pia-spectrum__free {
font-size: 10px; font-weight: 600; color: #4FE3FF;
background: rgba(79, 227, 255, 0.12); border: 0.5px solid rgba(79, 227, 255, 0.25);
padding: 2px 7px; border-radius: 20px; letter-spacing: 0.04em; margin-left: auto;
}
.pia-spectrum__desc { font-size: 14px; color: rgba(255, 255, 255, 0.72); line-height: 1.6; margin-bottom: 16px; }
.pia-spectrum__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.pia-spectrum__pill { font-size: 12px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.pia-spectrum__pill--cyan { color: #4FE3FF; background: rgba(79, 227, 255, 0.08); border: 0.5px solid rgba(79, 227, 255, 0.2); }
.pia-spectrum__pill--purple { color: #A78BFA; background: rgba(167, 139, 250, 0.08); border: 0.5px solid rgba(167, 139, 250, 0.2); }
.pia-spectrum__pill--gold { color: #F5B82E; background: rgba(245, 184, 46, 0.08); border: 0.5px solid rgba(245, 184, 46, 0.2); }
.pia-spectrum__pill--muted { color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.18); }
.pia-spectrum__form { display: flex; flex-direction: column; gap: 8px; }
.pia-spectrum__inputs { display: flex; gap: 8px; }
.pia-spectrum__input {
background: rgba(255, 255, 255, 0.07); border: 0.5px solid rgba(255, 255, 255, 0.12);
border-radius: 6px; padding: 10px 12px; font-size: 15px; color: #fff;
font-family: 'Space Grotesk', sans-serif; min-width: 0; outline: none;
}
.pia-spectrum__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.pia-spectrum__input:focus { border-color: rgba(79, 227, 255, 0.4); }
.pia-spectrum__input--name { flex: 1; }
.pia-spectrum__input--email { flex: 1.7; }
.pia-spectrum__success { font-size: 14px; color: #4FE3FF; padding: 10px 0 8px; letter-spacing: 0.02em; }
.pia-spectrum__btn {
width: 100%; background: #F5B82E; border: none; border-radius: 8px;
padding: 14px 30px; font-size: 15px; font-weight: 600; color: #0B1226;
cursor: pointer; font-family: 'Space Grotesk', sans-serif;
transition: background 0.2s ease, transform 0.15s ease;
}
.pia-spectrum__btn:hover { background: #D99410; transform: translateY(-1px); }
.pia-spectrum__btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.pia-footer__nav {
display: grid; grid-template-columns: 1fr 1fr;
gap: 24px 12px; align-content: start; text-align: right;
}
.pia-footer__nav-heading {
font-size: 13px; font-weight: 700; color: #fff !important;
letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; text-align: right;
}
.zoneFooter1 .pia-footer__nav-heading,
.WaPlaceHolderFooter1 .pia-footer__nav-heading { color: #fff !important; }
.pia-footer__nav a {
font-size: 15px; color: rgba(255, 255, 255, 0.75);
text-decoration: none; display: block; margin-bottom: 9px;
transition: color 0.15s; text-align: right;
}
.pia-footer__nav a:last-child { margin-bottom: 0; }
/* Left white here too: dark green footer, same contrast reasoning as the
mobile nav above. */
.pia-footer__nav a:hover { color: rgba(255, 255, 255, 0.98); }
.pia-footer__legal {
position: relative; z-index: 3; padding: 0 48px 22px;
display: flex; flex-direction: column; gap: 8px;
max-width: 1180px; margin-left: auto; margin-right: auto;
}
.pia-footer__copyright { font-size: 13px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; }
.pia-footer__legal-links { display: flex; gap: 20px; list-style: none; }
.pia-footer__legal-links a { font-size: 13px; color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color 0.15s; }
.pia-footer__legal-links a:hover { color: rgba(255, 255, 255, 0.9); }
@media (max-width: 768px) {
.pia-footer__orb-layer, .pia-footer__photon, .pia-footer__vignette { display: none; }
.pia-footer__beam { bottom: 80px; }
.pia-footer__inner { padding: 36px 24px 24px; }
.pia-footer__grid { grid-template-columns: 1fr; margin-bottom: 0; }
.pia-footer__brand { margin-bottom: 0; }
.pia-spectrum { margin-top: 28px; margin-bottom: 32px; }
.pia-spectrum__inputs { flex-direction: column; }
.pia-spectrum__input--email { flex: unset; }
.pia-footer__nav { gap: 24px 16px; margin-bottom: 40px; text-align: left; }
.pia-footer__nav-heading { text-align: left; }
.pia-footer__nav a { text-align: left; }
.pia-footer__legal { padding: 0 24px 24px; gap: 10px; }
.pia-footer__legal-links { gap: 16px; flex-wrap: wrap; }
}
/* Wild Apricot branding hide */
.WaFooterMessage, #WaPoweredByMessage,
[class*="WaPowered"], [id*="WaPowered"] { display: none !important; }
#idFooterPoweredByContainer { display: none !important; }
/* Full-width fix */
.zoneFooter1 .container_12 {
max-width: none !important; width: 100% !important;
padding-left: 0 !important; padding-right: 0 !important;
margin-left: 0 !important; margin-right: 0 !important;
}
.zoneFooter1 .s1_grid_12, .zoneFooter1 .s2_grid_12, .zoneFooter1 .s3_grid_12 {
width: 100% !important; margin: 0 !important;
}
.zoneFooter1 .gadgetStyleBody, .zoneFooter1 #idFooterContentHolder { padding: 0 !important; margin: 0 !important; }
.zoneFooter1 .gadgetStyleTitle { display: none !important; }
.WaPlaceHolderFooter > div { padding: 0 !important; }
/* ============================================================
PIA - Deep Forest palette override
Drop at the END of the existing theme CSS to activate.
Reverts cleanly by removing this block.
============================================================ */
:root {
/* Base darks: navy to Deep Forest */
--pia-ink: #0C1E12;
--pia-surface: #132818;
/* Interactive: Authority Blue to Emerald */
--pia-primary: #1A8C6A;
/* Surfaces: faint green tint instead of blue-tint */
--pia-tint: #F4F9F6;
--pia-border: #DFF0E6;
/* Everything below is UNCHANGED, listed for clarity */
--pia-gold: #F5B82E;
--pia-gold-deep:#D99410;
--pia-cyan: #4FE3FF;
--pia-violet: #A78BFA;
--pia-body-col: #44507A;
--pia-muted: #5A6786;
}
/* Hardcoded #0B1226 references that don't use var(--pia-ink) */
.pia-hero { background: #0C1E12; }
#pia-mobile-menu { background: #0C1E12 !important; }
.pia-footer { background: #0C1E12; }
.pia-hero-title { color: #fff !important; }
/* Auth link - was blue underline, now emerald */
.pia-auth-link {
color: #1A8C6A !important;
border-bottom-color: #1A8C6A !important;
}
.pia-auth-link:hover {
color: #126B50 !important;
border-bottom-color: #126B50 !important;
}
/* Form focus ring */
.fieldContainer input:focus,
.fieldContainer textarea:focus {
border-color: #1A8C6A !important;
box-shadow: 0 0 0 3px rgba(26,140,106,0.15) !important;
}
/* Directory search focus */
.WaGadgetMemberDirectory input.searchField:focus {
border-color: #1A8C6A !important;
box-shadow: 0 0 0 3px rgba(26,140,106,0.12) !important;
}
/* Calendar today highlight */
.WaGadgetEventCalendar td.calendarToday,
.WaGadgetEventCalendar .calendarToday {
background: rgba(26,140,106,0.06) !important;
border-color: #1A8C6A !important;
}
.WaGadgetEventCalendar td.calendarToday .dayNumber { color: #1A8C6A; }
/* Calendar nav buttons hover */
.WaGadgetEventCalendar .calendarNavigation a:hover {
background: #1A8C6A !important;
border-color: #1A8C6A;
}
/* Calendar event chips */
.WaGadgetEventCalendar .eventCalendarEvent,
.WaGadgetEventCalendar .calendarEvent { background: #1A8C6A !important; }
/* Member type badge */
.WaGadgetMemberDirectory .memberType,
.WaGadgetMemberDirectory .memberLevel {
color: #1A8C6A !important;
background: rgba(26,140,106,0.08);
}
/* Blog category chip */
.WaGadgetBlog .blogPostTag,
.WaGadgetBlog .blogCategory,
.WaGadgetBlog .postCategory {
color: #1A8C6A !important;
background: rgba(26,140,106,0.08);
}
/* Blog read more */
.WaGadgetBlog .blogPostReadMore a,
.WaGadgetBlog .readMore a { color: #1A8C6A !important; }
/* Membership step completed */
.WaGadgetMembershipApplication .membershipStep.completed,
.WaGadgetMembershipApplication .wizardStep.done { background: #1A8C6A !important; }
/* Membership level selected ring */
.WaGadgetMembershipApplication .membershipLevelItem.selected,
.WaGadgetMembershipApplication .membershipLevelItem input[type=radio]:checked + label {
border-color: #1A8C6A !important;
box-shadow: 0 0 0 3px rgba(26,140,106,0.15);
}
/* Membership level price */
.WaGadgetMembershipApplication .membershipLevelPrice,
.WaGadgetMembershipApplication .levelPrice { color: #1A8C6A !important; }
/* Filter chips active */
.WaGadgetMemberDirectory .filterChip:hover,
.WaGadgetMemberDirectory .categoryFilter a:hover,
.WaGadgetMemberDirectory .filterChip.active,
.WaGadgetMemberDirectory .categoryFilter a.active {
background: #1A8C6A !important;
border-color: #1A8C6A;
}
/* Pagination hover */
.WaGadgetBlog .blogPagination a:hover,
.WaGadgetBlog .pagination a:hover,
.WaGadgetEventCalendar .calendarNavigation a {
background: #1A8C6A;
border-color: #1A8C6A;
}
/* Profile button border */
.pia-btn-profile {
color: #1A8C6A !important;
border-color: #1A8C6A !important;
}
.pia-btn-profile:hover { background: rgba(26,140,106,0.06) !important; }
/* Footer vignette - update hardcoded navy to deep forest */
.pia-footer__vignette {
background: linear-gradient(
90deg,
#0C1E12 28%,
rgba(12, 30, 18, 0.55) 50%,
rgba(12, 30, 18, 0) 74%
);
}
/* Footer orbs - shift cyan/blue to green-adjacent tones */
/* (orb colours are inline styles; these rules handle the photon glow) */
.pia-footer__photon {
box-shadow:
0 0 18px 6px rgba(79, 227, 255, 0.85),
0 0 50px 22px rgba(26, 140, 106, 0.5);
}
/* Stats bar - update hardcoded navy text */
.pia-stats strong { color: #0C1E12; }
/* Footer zone - strip WA gadget padding and force full width */
#id_Footer1,
#id_Footer1 > div,
.WaPlaceHolderFooter1,
.WaPlaceHolderFooter1 > div,
.WaPlaceHolderFooter1 .WaGadgetCustomHTML,
.WaPlaceHolderFooter1 .WaGadgetOnly,
.WaPlaceHolderFooter1 .gadgetStyleBody {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
#id_Footer1 .container_12,
.WaPlaceHolderFooter1 .container_12 {
max-width: none !important; width: 100% !important;
padding-left: 0 !important; padding-right: 0 !important;
margin-left: 0 !important; margin-right: 0 !important;
}
#id_Footer1 .s1_grid_12,
#id_Footer1 .s2_grid_12,
#id_Footer1 .s3_grid_12,
.WaPlaceHolderFooter1 .s1_grid_12,
.WaPlaceHolderFooter1 .s2_grid_12,
.WaPlaceHolderFooter1 .s3_grid_12 { width: 100% !important; margin: 0 !important; }
/* Footer beams - reordered for Deep Forest palette */
.pia-footer__beam--cyan { background: linear-gradient(90deg, #F5B82E, transparent 85%) !important; transform: rotate(-9deg) !important; }
.pia-footer__beam--blue { background: linear-gradient(90deg, #1A8C6A, transparent 85%) !important; transform: rotate(-3deg) !important; }
.pia-footer__beam--purple { background: linear-gradient(90deg, #4FE3FF, transparent 85%) !important; transform: rotate(4deg) !important; }
.pia-footer__beam--gold { background: linear-gradient(90deg, #A78BFA, transparent 85%) !important; transform: rotate(11deg) !important; }
/* Hero - Deep Forest overrides */
/* Background */
.pia-hero { background: #0C1E12 !important; }
/* Vignette - navy to deep forest */
.pia-vignette {
background: linear-gradient(
90deg,
#0C1E12 30%,
rgba(12, 30, 18, 0.42) 52%,
rgba(12, 30, 18, 0) 75%
) !important;
}
/* Spectrum edge gradient - blue segment to emerald */
.pia-spectrum-edge {
background: linear-gradient(
90deg,
#4FE3FF,
#1A8C6A 35%,
#A78BFA 65%,
#F5B82E
) !important;
}
/* Photon glow - blue halo to emerald */
.pia-photon {
box-shadow:
0 0 18px 6px rgba(79, 227, 255, 0.85),
0 0 50px 22px rgba(26, 140, 106, 0.5) !important;
}
/* Stats bar background */
.pia-stats { background: #F4F9F6 !important; border-bottom-color: #DFF0E6 !important; }
/* ============================================================
PIA - Coloured card borders (.pia-unit-*)
Set as the "CSS class" of a Content gadget (Advanced tab).
One colour per gadget, no automatic cycling:
pia-unit-cyan, pia-unit-green, pia-unit-violet (2px, 35% tint)
pia-unit-gold (3px solid gold, used as the "featured" box)
Used on: /pttc curriculum rows, homepage "Our focus" cards,
/join benefit cards and the "Membership is free" box.
============================================================ */
.pia-unit-cyan {
border: 2px solid rgba(14, 116, 144, 0.35) !important;
background: rgba(14, 116, 144, 0.04) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.pia-unit-green {
border: 2px solid rgba(26, 140, 106, 0.35) !important;
background: rgba(26, 140, 106, 0.04) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.pia-unit-gold {
border: 3px solid #F5B82E !important;
background: rgba(245, 184, 46, 0.06) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.pia-unit-violet {
border: 2px solid rgba(167, 139, 250, 0.35) !important;
background: rgba(167, 139, 250, 0.04) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
/* ============================================================
PIA - Board of Directors rows (.pia-bod-row)
============================================================ */
/* PIA - Board of Directors two-column layout rows (Website ->
two-column layout, photo in column 1, content gadget in column
2). Add the SAME class, pia-bod-row, to every row's "Additional
CSS class" field in the WA layout editor, in board order. The
border colour then rotates automatically, cyan/green/gold/
violet/cyan/green, so nothing to pick per row. White background
(not the tinted .pia-unit-* fill), solid 2px border on every
colour (the gold .pia-unit-gold above is 3px elsewhere, these
are all 2px so the rows read consistently).
Uses :nth-child(...of .pia-bod-row) so it only counts rows that
carry this class, ignoring any other rows/sections on the page
that might share the same underlying tag. */
.pia-bod-row {
background: #FFFFFF !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.pia-bod-row:nth-child(4n+1 of .pia-bod-row) { border: 2px solid #0E7490 !important; }
.pia-bod-row:nth-child(4n+2 of .pia-bod-row) { border: 2px solid #1A8C6A !important; }
.pia-bod-row:nth-child(4n+3 of .pia-bod-row) { border: 2px solid #F5B82E !important; }
.pia-bod-row:nth-child(4n+4 of .pia-bod-row) { border: 2px solid #7C5CFC !important; }
/* ============================================================
PIA - Hide "Homepage" from desktop nav
Append to the END of the main theme CSS sheet (Website ->
Design -> Custom CSS), same as the Deep Forest palette block.
Reverts cleanly by removing this block.
Logo (.WaGadgetAccountLogo, id_z6amMgK) now links to "/" via
the wrapLogo() script added to the header Custom HTML gadget
(id_b7E38S1) - see PIA_Header_Gadget_Updated.html - so this
nav entry is redundant on desktop. Left untouched on mobile,
it's tucked behind a tap so it isn't worth the complexity of
also editing the buildMobileNav() JS.
Targeted by href rather than position or the "sel" class
(which marks whichever page is currently active, not
"Homepage" specifically) so this keeps working if the menu
gets reordered or the homepage's Wild Apricot page title
changes later.
============================================================ */
#id_EDnGrxR ul.firstLevel > li:has(> div.item > a[href="https://photonics.org.au/"]) {
display: none !important;
}
/* ============================================================
PIA HOMEPAGE - News & Events section, Recent News card styling
REPLACES the existing "RECENT NEWS GADGET DESIGN" block in the
theme sheet (the green left-border li style). Delete that old
block and paste this in its place.
Same border/background formula as .pia-unit-cyan and
.pia-unit-green (2px tinted border, faint tint fill, 8px
radius), cycled through the same four colours already used for
the "who is this for" role pills on the course page: cyan
(#0E7490), green (#1A8C6A), gold (#F5B82E), purple (#6D28D9).
Uses :nth-child so it keeps rotating automatically as new blog
posts get added, no manual per-item styling needed.
Note: this purple (#6D28D9) is a different, deeper shade than
--pia-violet (#A78BFA) used for the Industry Reports card and
the footer/spectrum pills. Both now exist on the site for
different components, worth knowing if you want to consolidate
later.
Update: publication date/time bumped to 14px and de-italicised
to match the event location text exactly (font, size, colour),
same italic-by-default issue as the events date, just never
explicitly overridden here before.
Update: date now right-aligned within the card, and trimmed to
date-only (time dropped) via stripBlogPostTime() in
PIA_Header_Gadget_Updated.html, same reasoning as
formatEventDates: it's one plain text string, CSS can't cut
part of it out.
============================================================ */
.WaGadgetRecentBlogPosts ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.WaGadgetRecentBlogPosts li {
border-radius: 8px !important;
padding: 14px 16px !important;
margin-bottom: 0 !important;
}
.WaGadgetRecentBlogPosts li:nth-child(4n+1) {
border: 2px solid rgba(14, 116, 144, 0.35) !important;
background: rgba(14, 116, 144, 0.04) !important;
}
.WaGadgetRecentBlogPosts li:nth-child(4n+2) {
border: 2px solid rgba(26, 140, 106, 0.35) !important;
background: rgba(26, 140, 106, 0.04) !important;
}
.WaGadgetRecentBlogPosts li:nth-child(4n+3) {
border: 2px solid rgba(245, 184, 46, 0.35) !important;
background: rgba(245, 184, 46, 0.06) !important;
}
.WaGadgetRecentBlogPosts li:nth-child(4n) {
border: 2px solid rgba(109, 40, 217, 0.35) !important;
background: rgba(109, 40, 217, 0.04) !important;
}
.WaGadgetRecentBlogPosts .title {
font-family: 'Space Grotesk', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin-bottom: 4px !important;
color: #0C1E12 !important;
}
.WaGadgetRecentBlogPosts .title a {
color: inherit !important;
text-decoration: none !important;
}
.WaGadgetRecentBlogPosts .title a:hover {
color: #1A8C6A !important;
}
.WaGadgetRecentBlogPosts .date {
text-align: right !important;
}
.WaGadgetRecentBlogPosts .date span {
font-size: 14px !important;
font-style: normal !important;
color: #5A6786 !important;
font-family: 'Inter', sans-serif !important;
}
.WaGadgetRecentBlogPosts .author {
display: none !important;
}
.WaGadgetRecentBlogPosts .date::after {
content: none !important;
}
/* ============================================================
PIA HOMEPAGE - Upcoming Events styling
Targets the VERIFIED live class .WaGadgetUpcomingEvents.
Your existing "EVENTS LIST" CSS block targets
.WaGadgetEventsList, which doesn't exist on this gadget, that
whole block has never actually been applying. Leave it in
place (harmless dead weight) or remove it, up to you, but
don't expect it to do anything.
Fixes: title and date/location font sizes bumped up, the
italic on .dateonly removed, font-family made explicit (Inter
was already technically applying, the italic was just making
it read as a different font).
Time removal: not done here, .dateonly is one text string
("13 Aug 2026 4:30 PM"), CSS can't cut part of it out. Check
the gadget's own edit panel for a "show time" style setting
first. If there isn't one, let me know and I'll write a small
script to strip it instead.
============================================================ */
.WaGadgetUpcomingEvents li .title {
font-size: 17px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
color: #0C1E12 !important;
}
.WaGadgetUpcomingEvents li .title a {
color: inherit !important;
text-decoration: none !important;
}
.WaGadgetUpcomingEvents li .title a:hover {
color: #1A8C6A !important;
}
.WaGadgetUpcomingEvents li .date {
font-size: 15px !important;
font-family: 'Inter', sans-serif !important;
}
.WaGadgetUpcomingEvents li .date .dateonly {
font-style: normal !important;
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
color: #44507A !important;
}
.WaGadgetUpcomingEvents li .date .location {
font-style: normal !important;
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
color: #5A6786 !important;
}
/* ============================================================
PIA HOMEPAGE - Upcoming Events, two-column card design
Targets the VERIFIED live class .WaGadgetUpcomingEvents.
Layout: black date box spans both rows on the left (day big,
month/year, time), title top-right, location bottom-right
underneath it. Uses CSS Grid with display:contents on .date
to "unwrap" it so dateonly/separator/location can be placed
independently in the grid alongside .title (same trick as
discussed for the earlier stacked version, now with a grid
instead of flex order since it's a 2D layout this time).
Colour rotation is REVERSED from the news column (purple,
gold, green, cyan instead of cyan, green, gold, purple) so
items sitting side by side in the two columns don't match.
Requires the companion script in PIA_Header_Gadget_Updated.html
(formatEventDates) to split "13 Aug 2026 4:30 PM" into the
three separate lines shown in the date box, CSS alone can't
parse a plain text string.
Update: day and time bolded for visibility, month/year stays
lighter weight as a label. Added !important + explicit
font-family to the three inner spans directly rather than
relying on inheritance from .dateonly, that's likely why the
font wasn't taking before. Event title switched to Space
Grotesk at 14px to match the news column's post titles exactly.
============================================================ */
.WaGadgetUpcomingEvents ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.WaGadgetUpcomingEvents li {
display: grid !important;
grid-template-columns: 72px 1fr !important;
column-gap: 16px !important;
row-gap: 4px !important;
align-items: start !important;
border-radius: 8px !important;
padding: 16px 18px !important;
margin-bottom: 12px !important;
}
.WaGadgetUpcomingEvents li:nth-child(4n+1) {
border: 2px solid rgba(109, 40, 217, 0.35) !important;
background: rgba(109, 40, 217, 0.04) !important;
}
.WaGadgetUpcomingEvents li:nth-child(4n+2) {
border: 2px solid rgba(245, 184, 46, 0.35) !important;
background: rgba(245, 184, 46, 0.06) !important;
}
.WaGadgetUpcomingEvents li:nth-child(4n+3) {
border: 2px solid rgba(26, 140, 106, 0.35) !important;
background: rgba(26, 140, 106, 0.04) !important;
}
.WaGadgetUpcomingEvents li:nth-child(4n) {
border: 2px solid rgba(14, 116, 144, 0.35) !important;
background: rgba(14, 116, 144, 0.04) !important;
}
.WaGadgetUpcomingEvents li .date {
display: contents !important;
}
.WaGadgetUpcomingEvents li .date .separator {
display: none !important;
}
.WaGadgetUpcomingEvents li .date .dateonly {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
background: #0C1E12 !important;
color: #fff !important;
border-radius: 8px !important;
padding: 10px 6px !important;
font-style: normal !important;
font-family: 'Space Grotesk', sans-serif !important;
text-align: center !important;
}
.WaGadgetUpcomingEvents li .date .dateonly .pia-day {
display: block !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1 !important;
opacity: 1 !important;
}
.WaGadgetUpcomingEvents li .date .dateonly .pia-monthyear {
display: block !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
margin-top: 4px !important;
opacity: 0.85 !important;
}
.WaGadgetUpcomingEvents li .date .dateonly .pia-time {
display: block !important;
font-family: 'Space Grotesk', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
margin-top: 3px !important;
opacity: 0.95 !important;
}
.WaGadgetUpcomingEvents li .title {
grid-column: 2 !important;
grid-row: 1 !important;
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
color: #0C1E12 !important;
margin: 0 !important;
}
.WaGadgetUpcomingEvents li .title a {
color: inherit !important;
text-decoration: none !important;
}
.WaGadgetUpcomingEvents li .title a:hover {
color: #1A8C6A !important;
}
.WaGadgetUpcomingEvents li .date .location {
grid-column: 2 !important;
grid-row: 2 !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
color: #5A6786 !important;
font-style: normal !important;
}
/* ============================================================
PIA NEWS PAGE - Blog link colours, matched to the real markup
The .blogPostTitle / .blogPostReadMore selectors used earlier
in this sheet don't exist in Wild Apricot's actual blog list
HTML (confirmed from the live DOM) - real classes are
.boxHeaderTitle (post title link) and .boxFooterPrimaryContainer
(the "Read more" link). Since nothing matched, the built-in
Wild Apricot theme's own blue hover styles kept winning by
selector specificity regardless of stylesheet load order.
Same story on the pager: .near/.bound (Next/Last, Prev/First)
beat the generic a:hover rule, which is why only the plain,
class-less page-number link was already going green.
Scoped to #idBlogPostListContainer and !important'd so these
reliably outrank the built-in theme no matter its specificity.
============================================================ */
#idBlogPostListContainer .boxHeaderTitle a {
color: var(--pia-ink) !important;
text-decoration: none !important;
}
#idBlogPostListContainer .boxHeaderTitle a:hover {
color: var(--pia-primary) !important;
text-decoration: underline !important;
}
#idBlogPostListContainer .boxFooterPrimaryContainer a {
color: var(--pia-primary) !important;
text-decoration: none !important;
}
#idBlogPostListContainer .boxFooterPrimaryContainer a:hover {
color: var(--pia-primary) !important;
text-decoration: underline !important;
}
.blogPagerContainer a,
.blogPagerContainer a.near,
.blogPagerContainer a.bound {
color: var(--pia-primary) !important;
}
.blogPagerContainer a:hover,
.blogPagerContainer a.near:hover,
.blogPagerContainer a.bound:hover {
color: var(--pia-primary) !important;
text-decoration: underline !important;
}
.blogPagerContainer .linkCurrent {
color: var(--pia-ink) !important;
font-weight: 600;
}
/* ============================================================
PIA - Wild Apricot icon set, hidden site-wide
The "Back to list" arrow, the post-title arrow, and the "Read
more" dots are all the same built-in sprite image
(icon_set.png) rendered via background-image on a ::before/
::after pseudo-element. Simplest fix: hide the pseudo-element
entirely rather than recolour it, so no icon renders at all,
just the plain text link.
If another one of these WA icons turns up elsewhere on the
site still showing, inspect it to confirm it's the same
background-image (icon_set.png) on a ::before/::after, then
add its selector to the list below.
============================================================ */
#idBlogPostListContainer .boxHeaderTitle a::after,
#idBlogPostListContainer .boxFooterPrimaryContainer a::before,
.pageBackContainer a::before {
content: none !important;
display: none !important;
}
/* ============================================================
PIA - Wild Apricot Subscription/General form, restyled
Scoped to .generalFormOuterContainer so it applies to any
native WA form using this wrapper (the Spectrum subscription
form and similar), matching the rest of the site instead of
WA's default table layout, generic grey inputs, and stock
button styling.
Field rows are switched from WA's default label-left/input-
right table cells to label-above-input, full width, since
that's a cleaner match for a short signup form than a cramped
two-column table.
Input styling itself (border, radius, green focus ring) is
already inherited from the generic .fieldContainer rule near
the top of this sheet, this block only adds what's missing:
the card wrapper, title, mandatory-field note, and buttons.
============================================================ */
.generalFormOuterContainer {
max-width: 480px;
margin: 0 auto;
font-family: var(--pia-font-body);
background: #fff;
border: 1px solid var(--pia-border);
border-radius: var(--pia-radius);
padding: 32px;
}
.generalFormOuterContainer .cornersContainer { display: none !important; }
.generalFormOuterContainer .inner { padding: 0 !important; }
/* WA's rounded-corner technique wraps every section in 9 nested divs
(d1 through d9) that carry their own padding in the base theme, on
top of the .inner padding already zeroed above. That's what was
showing up as extra empty space below the button row, zeroing all
of them out here. */
.generalFormOuterContainer .d1,
.generalFormOuterContainer .d2,
.generalFormOuterContainer .d3,
.generalFormOuterContainer .d4,
.generalFormOuterContainer .d5,
.generalFormOuterContainer .d6,
.generalFormOuterContainer .d7,
.generalFormOuterContainer .d8,
.generalFormOuterContainer .d9 {
padding: 0 !important;
margin: 0 !important;
}
.generalFormOuterContainer .navigationOuterContainer,
.generalFormOuterContainer .navigationContainer,
.generalFormOuterContainer .formOuterContainer,
.generalFormOuterContainer .formContainer {
padding: 0 !important;
margin: 0 !important;
}
.generalFormOuterContainer .formTitle {
font-family: var(--pia-font-display) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--pia-ink) !important;
margin: 0 0 20px !important;
}
.generalFormOuterContainer .formTitle::after {
content: "";
display: block;
width: 40px;
height: 3px;
background: var(--pia-gold);
border-radius: 2px;
margin-top: 10px;
}
.generalFormOuterContainer .mandatoryFieldsTitle {
font-size: 12.5px;
color: var(--pia-muted);
font-family: var(--pia-font-body);
margin-bottom: 20px;
}
.generalFormOuterContainer .mandatoryFieldsTitle .mandatorySymbol {
color: var(--pia-gold-deep) !important;
font-weight: 700;
}
.generalFormOuterContainer .mandatoryFieldsTitle strong { font-weight: 500; }
.generalFormOuterContainer .fieldContainer table,
.generalFormOuterContainer .fieldContainer tbody,
.generalFormOuterContainer .fieldContainer tr,
.generalFormOuterContainer .fieldContainer td.left,
.generalFormOuterContainer .fieldContainer td.right {
display: block !important;
width: 100% !important;
text-align: left !important;
}
.generalFormOuterContainer .fieldContainer { margin-bottom: 18px !important; }
.generalFormOuterContainer .fieldLabel {
font-family: var(--pia-font-display) !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--pia-ink) !important;
margin-bottom: 6px !important;
text-align: left !important;
}
.generalFormOuterContainer .fieldLabel .mandatorySymbol {
color: var(--pia-gold-deep) !important;
margin-right: 2px;
}
.generalFormOuterContainer .fieldBody input.typeText {
width: 100% !important;
box-sizing: border-box !important;
text-align: left !important;
}
.generalFormOuterContainer #idReCaptchaContainer .fieldLabel { display: none !important; }
.generalFormOuterContainer #idReCaptchaContainer { margin-bottom: 20px !important; }
.generalFormOuterContainer .navigationContainer .right {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 18px !important;
}
.generalFormOuterContainer .backLink {
font-family: var(--pia-font-display) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--pia-muted) !important;
text-decoration: none !important;
}
.generalFormOuterContainer .backLink:hover {
color: var(--pia-primary) !important;
text-decoration: underline !important;
}
.generalFormOuterContainer input.nextButton {
font-family: var(--pia-font-display) !important;
font-weight: 600 !important;
font-size: 15px !important;
background: var(--pia-gold) !important;
color: var(--pia-ink) !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 28px !important;
cursor: pointer !important;
transition: background .2s ease, transform .15s ease !important;
}
.generalFormOuterContainer input.nextButton:hover {
background: var(--pia-gold-deep) !important;
transform: translateY(-1px);
}
/* ============================================================
PIA - Responsive square map embed (Contact page)
Wraps the Google Maps iframe so it fills its container's full
width and stays a perfect square at any screen size, instead
of the hardcoded 600x450 attributes on the iframe itself.
Put the class on a wrapper div around the iframe in the
Content/Custom HTML gadget rather than relying on inline
styles on the iframe surviving the gadget's own save/sanitise
pass.
============================================================ */
.pia-map-embed {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--pia-radius);
overflow: hidden;
}
.pia-map-embed iframe {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
border: 0 !important;
}
/* ============================================================
PIA - Quote banner over a photo (IPAS quote, reusable for
others). Only the background-image URL and position live
inline on the outer div (per-quote content), everything else
including the mobile breakpoint lives here so it survives
Content gadget sanitising and works at any screen width.
Gradient runs dark top-left to lighter bottom-right so text
sitting top-left stays readable while a bottom-right-weighted
photo focal point stays visible.
============================================================ */
.pia-quote-banner {
position: relative;
width: 100%;
min-height: 500px;
border-radius: var(--pia-radius);
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
}
.pia-quote-banner__scrim {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(12,30,18,0.85) 0%, rgba(12,30,18,0.55) 45%, rgba(12,30,18,0.15) 100%);
}
.pia-quote-banner__inner {
position: relative;
min-height: 500px;
padding: 40px;
display: flex;
align-items: flex-start;
box-sizing: border-box;
}
@media (max-width: 680px) {
.pia-quote-banner,
.pia-quote-banner__inner { min-height: 320px; }
.pia-quote-banner__inner { padding: 24px; }
}
/* ============================================================
PIA - Event detail page title bar, styled to match the inner
page hero (dark green banner, gold rule, gradient edge).
#idEventsTitleMainContainer is WA's own system-generated markup
for every event's detail page, we can't replace it with the
pia-ph-wrap/pia-ph-inner hero template's HTML like on normal
content pages, so this reskins the real WA elements directly
with CSS instead. Applies automatically to every event, current
and future, no per-event setup needed.
The back link's icon is already hidden by the sitewide
.pageBackContainer a::before rule earlier in this sheet, no
need to repeat it here.
Three direct children (back link, add-to-calendar dropdown,
title) are placed with CSS Grid instead of each centering
itself separately - back and the calendar dropdown share row 1
(one justified left, one right, within the same 1084px column),
title takes row 2 full-width. This is what puts them on the
same line while keeping everything aligned to the identical
1084px column at any screen size, mobile included - no separate
mobile padding rules needed for alignment any more.
============================================================ */
#idEventsTitleMainContainer {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background: #0C1E12;
box-sizing: border-box;
overflow: visible;
margin-bottom: 50px !important;
display: grid !important;
grid-template-columns: 1fr min(1084px, calc(100% - 40px)) 1fr !important;
}
#idEventsTitleMainContainer::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg, #4FE3FF, #1A8C6A 35%, #A78BFA 65%, #F5B82E) !important;
z-index: 2;
display: block !important;
}
/* Zero out WA's default gadget spacing above the hero. Two separate
sources of the same-looking 20px gap: the gadget wrapper itself
(class starts with WaGadgetEventsState - WA swaps the suffix per
page type: Details on the event page, Registration on the
registration flow, and presumably others - matched with a
[class*=] attribute selector so every variant is covered, not
just the one seen so far), and its own plain, class-less parent
div one level further out - that outer div has no id or class to
hook, so it's targeted via :has() from its known child instead.
Both need zeroing or the gap just moves up a level. */
div[class*="WaGadgetEventsState"] {
padding-top: 0 !important;
margin-top: 0 !important;
}
div:has(> div[class*="WaGadgetEventsState"]) {
padding-top: 0 !important;
margin-top: 0 !important;
}
#idEventsTitleMainContainer .pageBackContainer,
#idEventBackContainer {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: start !important;
align-self: center !important;
position: static !important;
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 24px 0 0 !important;
box-sizing: border-box !important;
float: none !important;
}
#idEventsTitleMainContainer .eventBackLink {
font-family: 'Inter', sans-serif !important;
color: #ffffff !important;
font-size: 14px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
#idEventsTitleMainContainer .eventBackLink:hover {
color: #F5B82E !important;
text-decoration: underline !important;
}
#idEventsTitleMainContainer .pageViewSwitcherOuterContainer,
#idEventViewSwitcher {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: center !important;
position: static !important;
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 24px 0 0 !important;
box-sizing: border-box !important;
float: none !important;
text-align: right !important;
}
#idEventsTitleMainContainer .cornersContainer { display: none !important; }
#idEventsTitleMainContainer .pageViewSwitcherContainer .inner { padding: 0 !important; }
#idEventsTitleMainContainer .d1, #idEventsTitleMainContainer .d2, #idEventsTitleMainContainer .d3,
#idEventsTitleMainContainer .d4, #idEventsTitleMainContainer .d5, #idEventsTitleMainContainer .d6,
#idEventsTitleMainContainer .d7, #idEventsTitleMainContainer .d8, #idEventsTitleMainContainer .d9 {
padding: 0 !important; margin: 0 !important;
}
#idEventsTitleMainContainer .ui.dropdown.-wa-add-event-to-calendar-dropdown {
/* Semantic UI's dropdown JS sets position:absolute on this
element itself and computes its own left offset, which is
what was sending it off-screen regardless of how well the
parent chain lines up - force it back into normal flow so it
sits where the markup actually places it. */
position: static !important;
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 8px !important;
padding: 8px 14px !important;
color: #ffffff !important;
font-family: 'Inter', sans-serif !important;
font-size: 13.5px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
}
#idEventsTitleMainContainer .ui.dropdown.-wa-add-event-to-calendar-dropdown .text {
color: #ffffff !important;
}
#idEventsTitleMainContainer .ui.dropdown.-wa-add-event-to-calendar-dropdown .icon {
color: #F5B82E !important;
}
#idEventsTitleMainContainer .pageTitleContainer.eventsTitleContainer {
grid-column: 2 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 20px 0 48px !important;
box-sizing: border-box !important;
position: relative !important;
}
#idEventsTitleMainContainer .pageTitleContainer.eventsTitleContainer::before {
content: '';
display: block;
width: 56px;
height: 3px;
background: #F5B82E;
border-radius: 2px;
margin-bottom: 20px;
}
#idEventsTitleMainContainer .pageTitle.SystemPageTitle {
font-family: 'Space Grotesk', sans-serif !important;
font-size: clamp(28px, 3.8vw, 38px) !important;
font-weight: 700 !important;
color: #ffffff !important;
letter-spacing: -0.02em !important;
line-height: 1.12 !important;
margin: 0 !important;
}
/* No mobile-specific side padding needed any more - the grid's
min(1084px, calc(100% - 40px)) middle column already gives all
three rows the same 20px margins once the viewport goes below
1084px, so back/calendar/title stay aligned to each other at
every width automatically. Kept only a smaller top gap on the
back/calendar row so it doesn't look oversized next to the
smaller mobile heading. */
@media (max-width: 680px) {
#idEventsTitleMainContainer .pageBackContainer,
#idEventBackContainer,
#idEventsTitleMainContainer .pageViewSwitcherOuterContainer,
#idEventViewSwitcher {
padding-top: 16px !important;
}
}
/* ============================================================
PIA - Event registration wizard nav (Cancel / Back / Next /
Confirm), appears on every step of WA's Advanced Event
registration flow - both the bottom nav (plain "cancel"/"prev"/
"next" IDs, used on the email + registration-info steps) and
the top nav on the final review step ("cancelTop"/"prevTop"/
"nextTop" IDs, where "next" is relabelled "Confirm"). WA reuses
the same "nextButton" class for every one of these regardless
of label, so class name alone can't tell them apart - matching
on the ID substring instead ("cancel"/"prev"/"next" catches
both the plain and *Top variants at once), which WA generates
consistently on every event's flow, current and future.
There's an older, broader rule earlier in this file
(.generalFormOuterContainer input.nextButton) that golds every
nav button indiscriminately - this block is intentionally
placed after it and wins on cascade order for the ones it
targets, so Cancel/Back get the secondary tint-outline treatment
(same idea as the membership wizard's prevButton) while Next/
Confirm keep the gold primary-action colour everywhere, both
nav positions, all three steps. Confirmed live 2026-07-09.
============================================================ */
.navigationContainer input[id*="cancel"],
.navigationContainer input[id*="prev"] {
font-family: var(--pia-font-display) !important;
font-weight: 600 !important;
font-size: 14px !important;
background: var(--pia-tint) !important;
color: var(--pia-ink) !important;
border: 1px solid var(--pia-border) !important;
border-radius: 8px !important;
padding: 11px 22px !important;
cursor: pointer !important;
transition: background .2s ease !important;
}
.navigationContainer input[id*="cancel"]:hover,
.navigationContainer input[id*="prev"]:hover {
background: var(--pia-border) !important;
}
.navigationContainer input[id*="next"] {
font-family: var(--pia-font-display) !important;
font-weight: 600 !important;
font-size: 14px !important;
background: var(--pia-gold) !important;
color: var(--pia-ink) !important;
border: none !important;
border-radius: 8px !important;
padding: 11px 28px !important;
cursor: pointer !important;
transition: background .2s ease, transform .15s ease !important;
}
.navigationContainer input[id*="next"]:hover {
background: var(--pia-gold-deep) !important;
transform: translateY(-1px);
}
/* Force a real gap between the Cancel group (.left) and the
Back/Confirm group (.right) regardless of WA's underlying float
or flex layout, and stack them with a consistent gap on small
screens instead of relying on the container to wrap cleanly on
its own - this is what was causing Cancel and Back to touch on
mobile. */
.navigationContainer .inner {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
}
.navigationContainer .left,
.navigationContainer .right {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
/* Stacked, full-width, one button per line on mobile - Cancel,
then Back, then Next/Confirm, in that DOM order - rather than
grouping Cancel alone on one row and Back+Next together on the
next, which looked cramped/uneven at narrow widths. */
@media (max-width: 480px) {
.navigationContainer .inner {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.navigationContainer .left,
.navigationContainer .right {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100% !important;
gap: 10px !important;
}
/* Every real button here has a disabled, inline-hidden NoScript
twin with the exact same class (WA's no-JS fallback). Forcing
display:block !important on the class alone was reaching that
hidden twin too - since !important beats its non-important
inline display:none - and showing it as a duplicate button.
:not([disabled]) excludes it, leaving only the live button. */
.navigationContainer input.nextButton:not([disabled]),
.navigationContainer input.nextButtonAutoWidth:not([disabled]) {
display: block !important;
width: 100% !important;
text-align: center !important;
box-sizing: border-box !important;
}
}
/* ============================================================
PIA - Event registration flow title (.titleContainer), styled
to match the inner page hero / event detail hero (dark green
banner, gold rule, gradient edge). WA's own markup for the
registration wizard - scoped with .WaGadgetEventsStateRegistration
so the generic .titleContainer class can't leak onto some other
unrelated system page that happens to reuse the same name.
Unlike the event detail page there's no separate back link and
no extra wrapper div around the title/calendar row - just the
h1 and #idTitleRight side by side - so the 100vw bleed uses side
padding directly on .titleContainer (clamped to a 20px minimum
via max(), same idea as the breakout-grid trick used on the
event detail hero, just simpler since there's only one row here)
rather than a separate max-width+margin:auto inner box.
============================================================ */
.WaGadgetEventsStateRegistration .titleContainer {
position: relative !important;
width: 100vw !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: #0C1E12 !important;
box-sizing: border-box !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 16px !important;
padding: 52px max(20px, calc((100vw - 1084px) / 2)) 48px !important;
margin: 0 0 50px !important;
overflow: visible !important;
}
.WaGadgetEventsStateRegistration .titleContainer::after {
/* WA has its own clearfix on this exact pseudo-element
(display:table; clear:both;), left over from .titleContainer's
original floated layout - now that it's flex, that clearfix
just collapses this bar instead of clearing anything, so
display/clear both need an explicit override here. */
content: '';
display: block !important;
clear: none !important;
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
width: auto !important;
background: linear-gradient(90deg, #4FE3FF, #1A8C6A 35%, #A78BFA 65%, #F5B82E) !important;
z-index: 2;
}
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle {
font-family: 'Space Grotesk', sans-serif !important;
font-size: clamp(26px, 3.4vw, 34px) !important;
font-weight: 700 !important;
color: #ffffff !important;
letter-spacing: -0.02em !important;
line-height: 1.15 !important;
margin: 0 !important;
flex: 1 1 320px !important;
}
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle::before {
content: '';
display: block;
width: 56px;
height: 3px;
background: #F5B82E;
border-radius: 2px;
margin-bottom: 18px;
}
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle a {
color: #ffffff !important;
text-decoration: none !important;
}
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle a:hover {
color: #F5B82E !important;
text-decoration: underline !important;
}
/* WA injects a default "external link" glyph on this title link -
a 35x35px circle-arrow via ::after (confirmed live: content:"",
display:inline-block, width/height:35px) - removed the same way
the sitewide .pageBackContainer a::before icon is suppressed
elsewhere in this file. */
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle a::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
}
.WaGadgetEventsStateRegistration #idTitleRight {
flex: 0 0 auto !important;
}
.WaGadgetEventsStateRegistration #idTitleRight .cornersContainer { display: none !important; }
.WaGadgetEventsStateRegistration #idTitleRight .pageViewSwitcherContainer .inner { padding: 0 !important; }
.WaGadgetEventsStateRegistration #idTitleRight .d1, .WaGadgetEventsStateRegistration #idTitleRight .d2,
.WaGadgetEventsStateRegistration #idTitleRight .d3, .WaGadgetEventsStateRegistration #idTitleRight .d4,
.WaGadgetEventsStateRegistration #idTitleRight .d5, .WaGadgetEventsStateRegistration #idTitleRight .d6,
.WaGadgetEventsStateRegistration #idTitleRight .d7, .WaGadgetEventsStateRegistration #idTitleRight .d8,
.WaGadgetEventsStateRegistration #idTitleRight .d9 {
padding: 0 !important; margin: 0 !important;
}
/* Same fix as the event detail page's calendar dropdown -
Semantic UI's JS sets position:absolute on the dropdown itself
and computes its own left offset independent of the surrounding
layout, so it needs forcing back into normal flow here too. */
.WaGadgetEventsStateRegistration #idTitleRight .ui.dropdown.-wa-add-event-to-calendar-dropdown {
position: static !important;
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 8px !important;
padding: 8px 14px !important;
color: #ffffff !important;
font-family: 'Inter', sans-serif !important;
font-size: 13.5px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
}
.WaGadgetEventsStateRegistration #idTitleRight .ui.dropdown.-wa-add-event-to-calendar-dropdown .text {
color: #ffffff !important;
}
.WaGadgetEventsStateRegistration #idTitleRight .ui.dropdown.-wa-add-event-to-calendar-dropdown .icon {
color: #F5B82E !important;
}
@media (max-width: 680px) {
.WaGadgetEventsStateRegistration .titleContainer {
padding-top: 36px !important;
padding-bottom: 32px !important;
align-items: flex-start !important;
}
}
/* ============================================================
21. PIA - Reusable layout utilities
Added 2 November 2026 (built for /join, usable on any page).
============================================================ */
/* ---- .pia-equal-row : equal-height boxes in a layout row ----
Use: click the layout ROW (not a gadget) > Advanced > CSS class
> pia-equal-row. Every gadget in the row then stretches to the
height of the tallest one. Desktop only, on mobile the columns
stack as normal. Used on: /join "Why join" benefit cards. */
@media (min-width: 768px) {
.pia-equal-row .WaLayoutRow { display: flex !important; }
.pia-equal-row .WaLayoutItem { display: flex !important; flex-direction: column; }
.pia-equal-row .WaLayoutPlaceHolder,
.pia-equal-row .WaLayoutPlaceHolder > div { flex: 1 1 auto; display: flex; flex-direction: column; }
.pia-equal-row .WaLayoutPlaceHolder > div > * { flex: 1 1 auto; }
}
/* ---- .pia-row-cta : text left, button right ----
Use inside a Content gadget (code view):
Desktop: text left, button right, thin divider under each row.
Mobile: button drops under the text, right-aligned.
Used on: /join "What's coming in 2027". */
.pia-row-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid #DFF0E6; }
.pia-row-cta > div { flex: 1; }
.pia-row-cta > a, .pia-row-cta > strong { flex-shrink: 0; }
@media (max-width: 767px) {
.pia-row-cta { flex-direction: column; align-items: stretch; gap: 16px; }
.pia-row-cta > a, .pia-row-cta > strong { align-self: flex-end; }
}
/* ---- .pia-pills / .pia-pill : coloured tags ----
Same look as the /pttc "Who is this for" pills (those are styled
inside a Custom HTML gadget on /pttc, these work in any Content
gadget on any page). Use:
Label
Colours: --green, --gold, --cyan, --purple.
Used on: /join "Who should join". */
.pia-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.pia-pill { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: 20px; display: inline-block; }
.pia-pill--green { color: #1A8C6A; background: rgba(26,140,106,.08); border: .5px solid rgba(26,140,106,.25); }
.pia-pill--gold { color: #92640A; background: rgba(245,184,46,.10); border: .5px solid rgba(245,184,46,.35); }
.pia-pill--cyan { color: #0E7490; background: rgba(14,116,144,.08); border: .5px solid rgba(14,116,144,.22); }
.pia-pill--purple { color: #6D28D9; background: rgba(109,40,217,.07); border: .5px solid rgba(109,40,217,.20); }
/* ============================================================
22. PIA JOIN PAGE - Membership application (/join)
Added 2 November 2026.
Scope: the Membership application gadget on /join has
Advanced > CSS class = pia-join-form. Every rule here starts
with .pia-join-form, so no other WA form on the site changes.
Builds on section 15 (.generalFormOuterContainer base styles).
Related, not in this sheet:
- Hero: Custom HTML gadget at the top of /join
- Scroll-to-form script: Custom HTML gadget under the form
(anchor is in the "JOIN NOW" gadget)
- Membership level: Members > Levels > "PIA Member 2027"
============================================================ */
/* ---- Width: all three boxes 720px on desktop ----
border-box so padding is inside the width and the level box,
form card and review box line up exactly. */
.pia-join-form .generalFormOuterContainer,
.pia-join-form #idInfoContainer { box-sizing: border-box !important; max-width: 720px; }
/* ---- Step 1: membership level box (#idInfoContainer) ----
With only one public level, WA skips level selection and shows
this plain info box. Restyled as a tinted card with the site
eyebrow + gold rule and a "Free for 2027" pill.
UPDATE the pill text when the level price changes. */
.pia-join-form #idInfoContainer { margin: 0 auto 24px !important; background: #F4F9F6 !important; border: 1px solid #DFF0E6; border-radius: 12px; padding: 24px 32px; }
.pia-join-form #idInfoContainer .infoTitle { float: none !important; width: auto !important; text-align: left; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; color: #1A8C6A; margin-bottom: 10px; }
.pia-join-form #idInfoContainer .infoTitle::after { content: ""; display: block; width: 56px; height: 3px; background: #F5B82E; border-radius: 2px; margin-top: 10px; }
.pia-join-form #idInfoContainer .infoText { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.pia-join-form #idInfoContainer .textLine { display: block; color: #5A6786; font-size: 14px; line-height: 1.6; }
.pia-join-form #idInfoContainer .textLine:first-child { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; color: #0C1E12; margin-bottom: 6px; }
.pia-join-form #idInfoContainer .levelPrice:empty::after { content: "Free for 2027"; display: inline-block; vertical-align: middle; margin-left: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 20px; color: #1A8C6A; background: rgba(26,140,106,.08); border: .5px solid rgba(26,140,106,.25); }
.pia-join-form #idInfoContainer .levelRecurring { display: none; }
.pia-join-form #idInfoContainer .cornersContainer,
.pia-join-form #idInfoContainer .infoSection { background: none; }
/* ---- Step 2: full-width text areas and dropdowns ----
(text inputs are already full width from section 15) */
.pia-join-form .fieldBody textarea,
.pia-join-form .fieldBody select { width: 100% !important; box-sizing: border-box !important; }
/* ---- Step 2 + review: section divider headings ----
WA renders each Section divider field as an inside
.captionOuterContainer, next to an empty label column that
pushed it off-centre. Hide the empty column and use the site
section eyebrow (green 15px uppercase + 56px gold rule). */
.pia-join-form .captionOuterContainer { margin: 32px 0 18px; }
.pia-join-form .captionOuterContainer:first-of-type { margin-top: 8px; }
.pia-join-form .captionOuterContainer .cornersContainer,
.pia-join-form .captionOuterContainer .fieldLabel { display: none !important; }
.pia-join-form .captionOuterContainer .fieldBody { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.pia-join-form .captionOuterContainer h4 {
font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important;
line-height: 1.3 !important; text-transform: uppercase; color: #1A8C6A !important;
text-align: left !important; margin: 0 !important; padding: 0 !important;
}
.pia-join-form .captionOuterContainer h4::after {
content: ""; display: block; width: 56px; height: 3px; background: #F5B82E; border-radius: 2px; margin-top: 10px;
}
/* ---- Review step: "Review and confirm" box ----
A different WA container (.confirmWindowInfo inside
.commonMessageBox) from the step 1 level box, default WA blue.
Restyled to match the step 1 level box. */
.pia-join-form .commonMessageBox { max-width: 720px; margin: 0 auto 24px; }
.pia-join-form .confirmWindowInfo {
box-sizing: border-box;
background: #F4F9F6 !important; border: 1px solid #DFF0E6 !important; border-radius: 12px;
padding: 24px 32px; box-shadow: none !important;
}
.pia-join-form .confirmWindowInfo .cww { display: none !important; }
.pia-join-form .confirmWindowInfo .cww-inner,
.pia-join-form .confirmWindowInfo .cww-co { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.pia-join-form .confirmWindowInfo .header {
font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 700 !important;
text-transform: uppercase; color: #1A8C6A !important; background: none !important;
padding: 0 !important; margin: 0 0 14px !important;
}
.pia-join-form .confirmWindowInfo .header::after {
content: ""; display: block; width: 56px; height: 3px; background: #F5B82E; border-radius: 2px; margin-top: 10px;
}
.pia-join-form #confirmationTable td.labelInfoColumn { display: none; }
.pia-join-form #confirmationTable td.infoColumn { padding: 0 !important; color: #5A6786; font-size: 14px; line-height: 1.6; }
.pia-join-form #confirmationTable td.infoColumn > span:first-child {
display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; color: #0C1E12; margin-bottom: 6px;
}
.pia-join-form .confirmWindowInfo .levelRecurring { display: none; }
/* ---- Review step: hide the empty spacer rows between answers ----
Scoped to the review state only, so validation messages on
step 2 are never hidden. */
.pia-join-form.WaGadgetMembershipApplicationStateReview .fieldContainer[id=""] { display: none; }
/* ============================================================
PIA - Member zone and login system pages
Covers:
/Sys/Login, /Sys/ResetPasswordRequest, /Sys/MembershipRenewal,
/Sys/Profile (view + edit), Privacy, Email subscriptions,
Photo albums, My event registrations, Invoices and payments,
Donations, and /Sys/PublicProfile/{id}
Scope: .WaGadgetContactProfile and .WaGadgetMemberPublicProfile
only. Append to the END of user.css, after the Deep Forest block.
Sections:
1. Reset WA chrome 8. Privacy + Subscriptions
2. Page title 9. Inputs
3. Top buttons 11. Edit mode layout
4. Tab bar 12. List tabs + empty states
5. Membership card 13. Privacy + Subscriptions extras
6. Profile section cards 14. Member public profile
7. Social login (hidden) 15. Login page
16. Reset password
17. Membership renewal (both steps)
10. Mobile (last)
============================================================ */
/* ---------- 1. Reset WA chrome ---------- */
.WaGadgetContactProfile {
font-family: var(--pia-font-body, 'Inter', sans-serif);
color: var(--pia-body-col, #44507A);
max-width: 1040px;
}
.WaGadgetContactProfile .cornersContainer,
.WaGadgetContactProfile .clearEndContainer { display: none !important; }
.WaGadgetContactProfile .d1, .WaGadgetContactProfile .d2, .WaGadgetContactProfile .d3,
.WaGadgetContactProfile .d4, .WaGadgetContactProfile .d5, .WaGadgetContactProfile .d6,
.WaGadgetContactProfile .d7, .WaGadgetContactProfile .d8, .WaGadgetContactProfile .d9,
.WaGadgetContactProfile .inner,
.WaGadgetContactProfile .formContainer,
.WaGadgetContactProfile .generalFieldsContainer,
.WaGadgetContactProfile .profileMainContainer,
.WaGadgetContactProfile .topButtonsContainer,
.WaGadgetContactProfile .memberDetailsTabsContainer,
.WaGadgetContactProfile .captionContainer,
.WaGadgetContactProfile .sectionContainer {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
.WaGadgetContactProfile .fieldLabel,
.WaGadgetContactProfile .fieldBody,
.WaGadgetContactProfile td.left {
float: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}
.WaGadgetContactProfile .fieldSubContainer { margin: 0 !important; }
/* Empty spacer rows WA puts between every field */
.WaGadgetContactProfile .fieldContainer[id=""],
.WaGadgetContactProfile .sectionOuterContainer .fieldContainer:not([id]) { display: none !important; }
/* ---------- 2. Page title ---------- */
.WaGadgetContent:has(+ .WaGadgetContactProfile) h2 {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 40px;
line-height: 1.1;
color: var(--pia-ink, #0C1E12);
margin: 0 0 28px;
}
.WaGadgetContent:has(+ .WaGadgetContactProfile) h2::before {
content: "Member portal";
display: block;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-primary, #1A8C6A);
margin-bottom: 8px;
}
.WaGadgetContent:has(+ .WaGadgetContactProfile) h2::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--pia-gold, #F5B82E);
margin-top: 16px;
}
/* ---------- 3. Top buttons ---------- */
.WaGadgetContactProfile #idTopButtonsContainer { margin: 0 0 20px !important; }
.WaGadgetContactProfile #idTopButtonsContainer .inner {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.WaGadgetContactProfile #idTopButtonsContainer input.typeButton { margin: 0 !important; }
/* Sub-pages (registrations, invoices...) wrap the buttons in a form */
.WaGadgetContactProfile #idTopButtonsContainer form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0;
}
.WaGadgetContactProfile #idTopButtonsContainer form input.typeButton { font-size: 15px !important; }
.WaGadgetContactProfile a.memberDirectoryDetailsLink {
display: inline-flex;
align-items: center;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 15px;
padding: 11px 24px;
border: 1.5px solid var(--pia-primary, #1A8C6A);
border-radius: 8px;
color: var(--pia-primary, #1A8C6A) !important;
text-decoration: none !important;
transition: background .2s ease;
}
.WaGadgetContactProfile a.memberDirectoryDetailsLink:hover { background: var(--pia-tint, #F4F9F6); }
/* ---------- 4. Tab bar ---------- */
.WaGadgetContactProfile #idMemberDetailsTabsContainer { margin: 0 0 28px !important; }
.WaGadgetContactProfile ul.memberDetailsTabMenu {
display: flex !important;
gap: 0;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid var(--pia-border, #DFF0E6);
overflow-x: auto;
scrollbar-width: none;
background: none !important;
}
.WaGadgetContactProfile ul.memberDetailsTabMenu::-webkit-scrollbar { display: none; }
.WaGadgetContactProfile ul.memberDetailsTabMenu li {
margin: 0 !important;
padding: 0 !important;
float: none !important;
background: none !important;
border: 0 !important;
flex: 0 0 auto;
list-style: none !important;
}
.WaGadgetContactProfile ul.memberDetailsTabMenu li:not(:has(a, span)) { display: none !important; }
.WaGadgetContactProfile ul.memberDetailsTabMenu li a,
.WaGadgetContactProfile ul.memberDetailsTabMenu li span {
padding: 12px 12px 13px;
margin-bottom: -1px;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 14px;
white-space: nowrap;
color: var(--pia-muted, #5A6786) !important;
text-decoration: none !important;
border-bottom: 3px solid transparent;
background: none !important;
transition: color .2s ease, border-color .2s ease;
}
/* WA toggles the a/span pair with inline display; keep the hidden one hidden */
.WaGadgetContactProfile ul.memberDetailsTabMenu li a:not([style*="none"]),
.WaGadgetContactProfile ul.memberDetailsTabMenu li span:not([style*="none"]) { display: inline-block !important; }
.WaGadgetContactProfile ul.memberDetailsTabMenu li a:hover {
color: var(--pia-ink, #0C1E12) !important;
border-bottom-color: var(--pia-border, #DFF0E6);
}
/* Active tab = the one that shows a span label (WA swaps link/label;
.selected does not move when Privacy/Subscriptions switch in JS) */
.WaGadgetContactProfile ul.memberDetailsTabMenu li span:not([style*="none"]) {
color: var(--pia-ink, #0C1E12) !important;
border-bottom-color: var(--pia-gold, #F5B82E);
}
/* ---------- 5. Membership card ---------- */
.WaGadgetContactProfile #idCaptionMembershipDetailsContainer {
position: relative;
overflow: hidden;
background: var(--pia-ink, #0C1E12);
border-radius: 16px 16px 0 0;
padding: 32px 32px 4px !important;
margin: 0 !important;
}
.WaGadgetContactProfile #idCaptionMembershipDetailsContainer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--pia-spectrum, linear-gradient(90deg, #4FE3FF, #1A8C6A 35%, #A78BFA 65%, #F5B82E));
}
.WaGadgetContactProfile #idCaptionMembershipDetailsContainer .fieldLabel { display: none !important; }
.WaGadgetContactProfile #idCaptionMembershipDetailsContainer .fieldBody {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.WaGadgetContactProfile #idCaptionMembershipDetailsContainer h4 {
margin: 0 !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 13px !important;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-gold, #F5B82E) !important;
}
.WaGadgetContactProfile .membershipActionButtonRow {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.WaGadgetContactProfile .membershipActionButtonRow input.typeButton {
margin: 0 !important;
padding: 10px 20px !important;
font-size: 14px !important;
}
.WaGadgetContactProfile .membershipActionButtonRow input.typeButton:not(:first-child) {
background: transparent !important;
color: #fff !important;
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35) !important;
}
.WaGadgetContactProfile .membershipActionButtonRow input.typeButton:not(:first-child):hover {
background: rgba(255,255,255,.08) !important;
}
.WaGadgetContactProfile #idSectionMembershipLevelContainer {
background: var(--pia-ink, #0C1E12);
border-radius: 0 0 16px 16px;
padding: 8px 32px 32px !important;
margin: 0 0 36px !important;
color: rgba(255,255,255,.8);
}
.WaGadgetContactProfile #idSectionMembershipLevelContainer .inner {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.WaGadgetContactProfile #idMembershipLevelContainerHolder { grid-column: 1 / -1; margin-bottom: 8px; }
.WaGadgetContactProfile #idExpirationDateContainerHolder > .fieldContainer { height: 100%; box-sizing: border-box; }
.WaGadgetContactProfile #idMembershipLevelContainer table,
.WaGadgetContactProfile #idMembershipLevelContainer tbody,
.WaGadgetContactProfile #idMembershipLevelContainer tr,
.WaGadgetContactProfile #idMembershipLevelContainer td { display: block; width: auto; padding: 0; border: 0; }
.WaGadgetContactProfile #idMembershipLevelContainer td.left { display: none; }
.WaGadgetContactProfile #idMembershipLevelContainer .textLine { display: block; }
.WaGadgetContactProfile #idMembershipLevelContainer .labelTitle {
display: block;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 34px;
line-height: 1.15;
color: #fff;
margin: 6px 0 10px;
}
.WaGadgetContactProfile #idMembershipLevelContainer .labelSubTitle:has(.levelPrice:empty) { display: none; }
.WaGadgetContactProfile #idMembershipLevelContainer .labelSubTitle { color: var(--pia-gold, #F5B82E); font-size: 16px; }
.WaGadgetContactProfile #idMembershipLevelContainer .typeInstruction {
display: inline-block;
font-size: 13.5px;
color: rgba(255,255,255,.65);
margin-right: 18px;
}
/* stat tiles */
.WaGadgetContactProfile #idSectionMembershipLevelContainer .simpleTextContainer {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
padding: 14px 16px !important;
margin: 0 !important;
}
.WaGadgetContactProfile #idSectionMembershipLevelContainer .simpleTextContainer .fieldLabel {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: 6px !important;
}
.WaGadgetContactProfile #idSectionMembershipLevelContainer .simpleTextContainer .fieldLabel img.tooltip {
filter: invert(1);
opacity: .5;
width: 13px !important;
height: 13px !important;
}
.WaGadgetContactProfile #idSectionMembershipLevelContainer .simpleTextContainer .fieldBody,
.WaGadgetContactProfile #idSectionMembershipLevelContainer .simpleTextContainer .fieldBody strong {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 17px;
color: #fff;
}
/* status as a pill */
.WaGadgetContactProfile #idMemberStatusContainer .fieldBody strong {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px !important;
padding: 3px 12px 3px 10px;
border-radius: 999px;
background: rgba(26,140,106,.22);
border: 1px solid rgba(26,140,106,.6);
}
.WaGadgetContactProfile #idMemberStatusContainer .fieldBody strong::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #3FD39B;
}
/* ---------- 6. Profile section cards ---------- */
.WaGadgetContactProfile [id^="idCaptionContainer"] {
background: #fff;
border: 1px solid var(--pia-border, #DFF0E6);
border-bottom: 0;
border-top: 3px solid var(--pia-primary, #1A8C6A);
border-radius: 14px 14px 0 0;
padding: 24px 28px 6px !important;
margin: 0 !important;
}
/* 4-colour rotation on card top edge */
.WaGadgetContactProfile [id^="idCaptionContainer"]:nth-child(4n+1 of [id^="idCaptionContainer"]) { border-top-color: #6D28D9; }
.WaGadgetContactProfile [id^="idCaptionContainer"]:nth-child(4n+2 of [id^="idCaptionContainer"]) { border-top-color: #F5B82E; }
.WaGadgetContactProfile [id^="idCaptionContainer"]:nth-child(4n+3 of [id^="idCaptionContainer"]) { border-top-color: #1A8C6A; }
.WaGadgetContactProfile [id^="idCaptionContainer"]:nth-child(4n+4 of [id^="idCaptionContainer"]) { border-top-color: #0E7490; }
.WaGadgetContactProfile [id^="idCaptionContainer"] .fieldLabel { display: none !important; }
.WaGadgetContactProfile [id^="idCaptionContainer"] h4,
.WaGadgetContactProfile #idSocialLoginContainer h4 {
margin: 0 !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 13px !important;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-primary, #1A8C6A) !important;
}
.WaGadgetContactProfile [id^="idCaptionContainer"] h4::after,
.WaGadgetContactProfile #idSocialLoginContainer h4::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--pia-gold, #F5B82E);
margin-top: 10px;
}
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer {
background: #fff;
border: 1px solid var(--pia-border, #DFF0E6);
border-top: 0;
border-radius: 0 0 14px 14px;
padding: 4px 28px 14px !important;
margin: 0 0 24px !important;
}
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 36px;
}
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .fieldContainer {
padding: 14px 0 !important;
margin: 0 !important;
border-bottom: 1px solid #EEF3F0;
min-width: 0;
}
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .fieldLabel {
display: block;
font-size: 12.5px;
font-weight: 500;
color: var(--pia-muted, #5A6786);
margin-bottom: 4px !important;
line-height: 1.4;
}
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .fieldBody {
font-size: 15px;
font-weight: 500;
color: var(--pia-ink, #0C1E12);
line-height: 1.45;
overflow-wrap: anywhere;
}
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .fieldBody a {
color: var(--pia-primary, #1A8C6A);
}
/* Empty values */
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .labeledTextContainer .fieldBody > span:empty::after,
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .pictureViewContainer .fieldBody > span:empty::after {
content: "Not provided";
font-weight: 400;
font-style: italic;
color: #9AA5B8;
}
/* Multi-select values as chips */
.WaGadgetContactProfile .fieldBody ul.list {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none !important;
margin: 2px 0 0 !important;
padding: 0 !important;
}
.WaGadgetContactProfile .fieldBody ul.list li {
margin: 0 !important;
padding: 0 !important;
background: none !important;
list-style: none !important;
}
.WaGadgetContactProfile .fieldBody ul.list li:not(:has(a)) {
padding: 4px 12px !important;
border-radius: 999px;
background: var(--pia-tint, #F4F9F6) !important;
border: 1px solid #AFD7CB;
font-size: 13.5px;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetContactProfile .fieldBody ul.list li.checked:has(a)::before {
content: "\2713";
color: var(--pia-primary, #1A8C6A);
font-weight: 700;
margin-right: 6px;
}
/* Member ID row (section with no heading) */
.WaGadgetContactProfile #idCaptionContainer0 { display: none !important; }
.WaGadgetContactProfile #idCaptionContainer0 + .sectionOuterContainer {
background: none;
border: 0;
padding: 0 !important;
margin: 0 0 16px !important;
}
.WaGadgetContactProfile #idCaptionContainer0 + .sectionOuterContainer .fieldContainer {
border: 0;
padding: 0 !important;
}
.WaGadgetContactProfile #idCaptionContainer0 + .sectionOuterContainer .labeledTextContainer {
display: flex;
gap: 8px;
align-items: baseline;
}
.WaGadgetContactProfile #idCaptionContainer0 + .sectionOuterContainer .fieldLabel,
.WaGadgetContactProfile #idCaptionContainer0 + .sectionOuterContainer .fieldBody {
font-size: 13px;
margin: 0 !important;
color: var(--pia-muted, #5A6786);
}
/* ---------- 7. Social login: hidden ---------- */
/* PIA uses email login. Remove this block to show the Connect buttons again. */
.WaGadgetContactProfile #idSocialLoginContainer,
.WaGadgetContactProfile #socialLoginContainer { display: none !important; }
/* ---------- 8. Privacy + Subscriptions tabs ---------- */
/* WA's JS hides the CHILDREN of these containers, not the containers.
So draw the card only when the content is visible. */
.WaGadgetContactProfile .profileDetailsContainer,
.WaGadgetContactProfile .memberSubscriptionsContainer {
background: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.WaGadgetContactProfile .profileDetailsContainer:has([id$="trDetailsToShow"]:not([style*="none"])),
.WaGadgetContactProfile .memberSubscriptionsContainer:has([id$="divEnableNotifications"]:not([style*="none"])) {
background: #fff !important;
border: 1px solid var(--pia-border, #DFF0E6) !important;
border-radius: 14px;
padding: 24px 28px !important;
margin: 0 0 24px !important;
}
.WaGadgetContactProfile .profileDetailsContainer .captionOuterContainer,
.WaGadgetContactProfile .memberSubscriptionsContainer .captionOuterContainer { margin: 20px 0 10px !important; }
.WaGadgetContactProfile .profileDetailsContainer .captionOuterContainer .fieldLabel,
.WaGadgetContactProfile .memberSubscriptionsContainer .captionOuterContainer .fieldLabel { display: none !important; }
.WaGadgetContactProfile .profileDetailsContainer h4,
.WaGadgetContactProfile .memberSubscriptionsContainer h4 {
margin: 0 !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 13px !important;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-primary, #1A8C6A) !important;
}
.WaGadgetContactProfile .profileDetailsContainer h4 .explanation {
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-family: var(--pia-font-body, 'Inter', sans-serif);
color: var(--pia-muted, #5A6786);
}
.WaGadgetContactProfile #memberFieldTable {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.WaGadgetContactProfile #memberFieldTable th,
.WaGadgetContactProfile #memberFieldTable td {
padding: 10px 12px;
border-bottom: 1px solid #EEF3F0;
text-align: left;
font-weight: 500;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetContactProfile #memberFieldTable td { text-align: center; }
.WaGadgetContactProfile #memberFieldTable .memberFieldHeadingTD {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--pia-muted, #5A6786);
background: var(--pia-tint, #F4F9F6);
}
.WaGadgetContactProfile #memberFieldTable tr:hover th,
.WaGadgetContactProfile #memberFieldTable tr:hover td { background: #FAFCFB; }
.WaGadgetContactProfile .memberSubscriptionsContainer .fieldContainer {
padding: 12px 0 !important;
border-bottom: 1px solid #EEF3F0;
}
/* ---------- 9. Edit mode inputs ---------- */
.WaGadgetContactProfile .fieldBody input.typeText,
.WaGadgetContactProfile .fieldBody input[type="text"],
.WaGadgetContactProfile .fieldBody input[type="email"],
.WaGadgetContactProfile .fieldBody input[type="password"],
.WaGadgetContactProfile .fieldBody textarea,
.WaGadgetContactProfile .fieldBody select {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
padding: 10px 12px !important;
border: 1px solid #CBDCD3 !important;
border-radius: 8px !important;
font-family: var(--pia-font-body, 'Inter', sans-serif);
font-size: 15px;
color: var(--pia-ink, #0C1E12);
background: #fff !important;
box-shadow: none !important;
}
.WaGadgetContactProfile .fieldBody input:focus,
.WaGadgetContactProfile .fieldBody textarea:focus,
.WaGadgetContactProfile .fieldBody select:focus {
outline: none;
border-color: var(--pia-primary, #1A8C6A) !important;
box-shadow: 0 0 0 3px rgba(26,140,106,.15) !important;
}
/* ---------- 11. Edit mode layout ---------- */
/* WA wraps each edit field in a label|input table: stack it */
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer table,
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer tbody,
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer tr,
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer td {
display: block;
width: auto !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
}
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .fieldContainer:has(.multiLinesContainer, .groupContainer, .checkboxGroupContainer, .radioGroupContainer),
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .fieldContainer.groupContainer {
grid-column: 1 / -1;
}
.WaGadgetContactProfile .groupBodyVertical {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 24px;
margin-top: 4px;
}
.WaGadgetContactProfile .fieldItem {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
font-weight: 400;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetContactProfile .fieldItem input[type="checkbox"],
.WaGadgetContactProfile .fieldItem input[type="radio"] {
accent-color: var(--pia-primary, #1A8C6A);
width: 16px;
height: 16px;
margin: 2px 0 0 !important;
}
.WaGadgetContactProfile .fieldItem label { cursor: pointer; }
.WaGadgetContactProfile .typeInstruction,
.WaGadgetContactProfile .memberIdDescription {
display: block;
font-size: 12.5px;
font-weight: 400;
color: var(--pia-muted, #5A6786);
margin-top: 6px;
line-height: 1.45;
}
.WaGadgetContactProfile .mandatorySymbol { color: #C2410C !important; margin-right: 3px; }
.WaGadgetContactProfile .fieldLabel strong.mandatoryLabel { font-weight: 500; }
.WaGadgetContactProfile .mandatoryFieldsTitle {
font-size: 13px;
color: var(--pia-muted, #5A6786);
margin: 0 0 16px;
}
.WaGadgetContactProfile .mandatoryFieldsTitle strong { font-weight: 500; }
.WaGadgetContactProfile .validationError,
.WaGadgetContactProfile .fieldBody .mandatory {
display: block;
font-size: 12.5px;
color: #B91C1C !important;
margin-top: 6px;
}
.WaGadgetContactProfile .fieldBody textarea { min-height: 96px; }
/* Secondary buttons: Cancel and similar */
.WaGadgetContactProfile input.typeButton[id*="cancel" i],
.WaGadgetContactProfile input.typeButton[id*="Cancel"] {
background: #fff !important;
color: var(--pia-primary, #1A8C6A) !important;
box-shadow: inset 0 0 0 1.5px var(--pia-primary, #1A8C6A) !important;
}
.WaGadgetContactProfile input.typeButton[id*="cancel" i]:hover {
background: var(--pia-tint, #F4F9F6) !important;
}
.WaGadgetContactProfile #idBottomButtonsContainer .inner {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px !important;
}
.WaGadgetContactProfile #idBottomButtonsContainer input.typeButton { margin: 0 !important; }
/* ---------- 12. List tabs: event registrations, invoices, donations ---------- */
.WaGadgetContactProfile .genericListHeaderContainer {
background: var(--pia-tint, #F4F9F6);
border: 1px solid var(--pia-border, #DFF0E6);
border-radius: 12px;
padding: 14px 18px !important;
margin: 0 0 16px !important;
}
.WaGadgetContactProfile .genericListHeaderContainer table,
.WaGadgetContactProfile .genericListHeaderContainer tbody { display: block; width: 100% !important; }
.WaGadgetContactProfile .genericListHeaderContainer tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
}
.WaGadgetContactProfile .genericListHeaderContainer td {
display: flex;
align-items: center;
gap: 8px;
padding: 0 !important;
border: 0 !important;
width: auto !important;
}
.WaGadgetContactProfile .genericListHeaderContainer td:empty,
.WaGadgetContactProfile .genericListHeaderContainer td.reloadContainer { display: none; }
.WaGadgetContactProfile .genericListHeaderContainer td.infoContainer { margin-left: auto; }
.WaGadgetContactProfile .genericListHeaderContainer td.infoContainer > div { display: flex; align-items: center; gap: 6px; }
.WaGadgetContactProfile .genericListHeaderContainer td .eventHeaderLabel { margin-bottom: 6px; }
.WaGadgetContactProfile .genericListHeaderContainer td.messages:not(:has(*:not([style*="none"]))) { display: none; }
.WaGadgetContactProfile .genericListHeaderContainer .eventHeaderLabel,
.WaGadgetContactProfile .genericListHeaderContainer .textGray,
.WaGadgetContactProfile .genericListHeaderContainer .textSmall {
font-size: 12px !important;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--pia-muted, #5A6786) !important;
}
.WaGadgetContactProfile .genericListHeaderContainer em,
.WaGadgetContactProfile .genericListHeaderContainer b {
font-style: normal;
font-weight: 700;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
color: var(--pia-ink, #0C1E12);
}
.WaGadgetContactProfile .genericListHeaderContainer input.searchBox,
.WaGadgetContactProfile .genericListHeaderContainer select {
height: 38px;
min-width: 200px;
box-sizing: border-box;
padding: 0 12px !important;
border: 1px solid #CBDCD3 !important;
border-radius: 8px !important;
background: #fff !important;
font-family: var(--pia-font-body, 'Inter', sans-serif);
font-size: 14px;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetContactProfile .genericListHeaderContainer input.searchBox:focus,
.WaGadgetContactProfile .genericListHeaderContainer select:focus {
outline: none;
border-color: var(--pia-primary, #1A8C6A) !important;
box-shadow: 0 0 0 3px rgba(26,140,106,.15);
}
/* Empty states */
.WaGadgetContactProfile .typeTextLabelNoData,
.WaGadgetContactProfile .emptyGalleryPanelInnerDiv {
display: block;
padding: 48px 24px !important;
border: 1.5px dashed #CBDCD3;
border-radius: 12px;
text-align: center;
font-size: 15px;
color: var(--pia-muted, #5A6786) !important;
background: #fff;
}
.WaGadgetContactProfile .emptyGalleryPanelInnerDiv .noPhotosLabel { display: block; margin-bottom: 16px; }
/* ---------- 13. Privacy tab extras ---------- */
.WaGadgetContactProfile .includeMeView {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--pia-tint, #F4F9F6);
border: 1px solid #AFD7CB;
font-size: 14px;
font-weight: 500;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetContactProfile .memberFieldHeading { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.WaGadgetContactProfile #memberFieldTable th { text-align: left !important; }
.WaGadgetContactProfile #memberFieldTable .memberFieldHeadingImage,
.WaGadgetContactProfile #memberFieldTable th.memberFieldTitle img { display: none !important; }
/* Replace WA's old globe / people / red-X icons with colour dots */
.WaGadgetContactProfile #memberFieldTable .anybodyImage,
.WaGadgetContactProfile #memberFieldTable .otherMembersImage,
.WaGadgetContactProfile #memberFieldTable .nobodyImage {
background: none !important;
width: 12px !important;
height: 12px !important;
border-radius: 50%;
margin: 0 auto !important;
padding: 0 !important;
}
.WaGadgetContactProfile #memberFieldTable .anybodyImage { background: var(--pia-primary, #1A8C6A) !important; }
.WaGadgetContactProfile #memberFieldTable .otherMembersImage { background: var(--pia-gold, #F5B82E) !important; }
.WaGadgetContactProfile #memberFieldTable .nobodyImage { background: #CBD2DC !important; }
.WaGadgetContactProfile .includeMeView img { display: none; }
.WaGadgetContactProfile .includeMeView::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pia-primary, #1A8C6A);
}
/* Email subscriptions rows */
.WaGadgetContactProfile .memberSubscriptionsContainer .labeledTextContainer {
display: flex;
align-items: flex-start;
gap: 16px;
}
.WaGadgetContactProfile .memberSubscriptionsContainer .labeledTextContainer .fieldLabel {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px !important;
border-radius: 999px;
background: var(--pia-tint, #F4F9F6);
border: 1px solid #AFD7CB;
font-size: 12.5px;
font-weight: 600;
color: var(--pia-primary, #1A8C6A);
}
.WaGadgetContactProfile .memberSubscriptionsContainer .labeledTextContainer .fieldLabel img { width: 12px; height: 12px; }
.WaGadgetContactProfile .memberSubscriptionsContainer .labeledTextContainer .fieldLabel:not(:has(*)) { display: none; }
.WaGadgetContactProfile .memberSubscriptionsContainer .fieldBody { font-size: 14px; color: var(--pia-body-col, #44507A); line-height: 1.5; }
.WaGadgetContactProfile .memberSubscriptionsContainer .fieldBody span[id$="tailLabel"] { display: block; font-weight: 600; color: var(--pia-ink, #0C1E12); }
.WaGadgetContactProfile .memberSubscriptionsContainer .fieldBody span[id$="tailNote"] { display: block; color: var(--pia-muted, #5A6786); font-size: 13px; }
/* ---------- 14. Member public profile (/Sys/PublicProfile/{id}) ---------- */
.WaGadgetMemberPublicProfile {
font-family: var(--pia-font-body, 'Inter', sans-serif);
color: var(--pia-body-col, #44507A);
max-width: 1040px;
}
.WaGadgetMemberPublicProfile .cornersContainer,
.WaGadgetMemberPublicProfile .clearEndContainer,
.WaGadgetMemberPublicProfile .fieldContainer:not([id]),
.WaGadgetMemberPublicProfile .fieldContainer[id=""] { display: none !important; }
.WaGadgetMemberPublicProfile .d1, .WaGadgetMemberPublicProfile .d2, .WaGadgetMemberPublicProfile .d3,
.WaGadgetMemberPublicProfile .d4, .WaGadgetMemberPublicProfile .d5, .WaGadgetMemberPublicProfile .d6,
.WaGadgetMemberPublicProfile .d7, .WaGadgetMemberPublicProfile .d8, .WaGadgetMemberPublicProfile .d9,
.WaGadgetMemberPublicProfile .inner,
.WaGadgetMemberPublicProfile .memberDirectoryDetailsContainer,
.WaGadgetMemberPublicProfile .formContainer,
.WaGadgetMemberPublicProfile .generalFieldsContainer,
.WaGadgetMemberPublicProfile .captionContainer,
.WaGadgetMemberPublicProfile .sectionContainer {
padding: 0 !important; margin: 0 !important; border: 0 !important;
background: none !important; box-shadow: none !important;
}
.WaGadgetMemberPublicProfile .fieldLabel,
.WaGadgetMemberPublicProfile .fieldBody {
float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; text-align: left !important;
}
.WaGadgetMemberPublicProfile .fieldSubContainer { margin: 0 !important; }
/* Back link */
.WaGadgetMemberPublicProfile .pageBackContainer { margin: 0 0 16px !important; padding: 0 !important; }
.WaGadgetMemberPublicProfile .pageBackContainer a {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600; font-size: 14px;
color: var(--pia-primary, #1A8C6A) !important;
text-decoration: none !important;
}
.WaGadgetMemberPublicProfile .pageBackContainer a::before { content: "\2190\00a0"; }
.WaGadgetMemberPublicProfile .pageBackContainer a::after { content: none !important; display: none !important; }
/* Header card */
.WaGadgetMemberPublicProfile .profileHeaderContainer {
position: relative;
overflow: hidden;
background: var(--pia-ink, #0C1E12);
background-image: radial-gradient(120% 140% at 100% 0%, rgba(26,140,106,.35) 0%, rgba(12,30,18,0) 55%);
border-radius: 16px;
padding: 36px 32px 32px !important;
margin: 0 0 28px !important;
}
.WaGadgetMemberPublicProfile .profileHeaderContainer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--pia-spectrum, linear-gradient(90deg, #4FE3FF, #1A8C6A 35%, #A78BFA 65%, #F5B82E));
}
.WaGadgetMemberPublicProfile .memberDirectoryDetailsHeaderContainer h2 {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 34px;
line-height: 1.15;
color: #fff !important;
}
.WaGadgetMemberPublicProfile .memberDirectoryDetailsHeaderContainer h2::before {
content: "PIA member";
flex: 1 0 100%;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-gold, #F5B82E);
margin-bottom: -8px;
}
.WaGadgetMemberPublicProfile .sendMailButtonContainer { margin: 0 !important; float: none !important; }
.WaGadgetMemberPublicProfile .sendMailButtonContainer input.typeButton { margin: 0 !important; font-size: 14px !important; padding: 10px 20px !important; }
/* Section cards */
.WaGadgetMemberPublicProfile .captionOuterContainer {
background: #fff;
border: 1px solid var(--pia-border, #DFF0E6);
border-bottom: 0;
border-top: 3px solid var(--pia-primary, #1A8C6A);
border-radius: 14px 14px 0 0;
padding: 24px 28px 6px !important;
margin: 0 !important;
}
.WaGadgetMemberPublicProfile .captionOuterContainer:nth-child(4n+1 of .captionOuterContainer) { border-top-color: #6D28D9; }
.WaGadgetMemberPublicProfile .captionOuterContainer:nth-child(4n+2 of .captionOuterContainer) { border-top-color: #F5B82E; }
.WaGadgetMemberPublicProfile .captionOuterContainer:nth-child(4n+3 of .captionOuterContainer) { border-top-color: #1A8C6A; }
.WaGadgetMemberPublicProfile .captionOuterContainer:nth-child(4n+4 of .captionOuterContainer) { border-top-color: #0E7490; }
.WaGadgetMemberPublicProfile .captionOuterContainer .fieldLabel { display: none !important; }
.WaGadgetMemberPublicProfile .captionOuterContainer h4 {
margin: 0 !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 13px !important;
line-height: 1.3 !important;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-primary, #1A8C6A) !important;
}
.WaGadgetMemberPublicProfile .captionOuterContainer h4::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--pia-gold, #F5B82E);
margin-top: 10px;
}
.WaGadgetMemberPublicProfile .captionOuterContainer + .sectionOuterContainer {
background: #fff;
border: 1px solid var(--pia-border, #DFF0E6);
border-top: 0;
border-radius: 0 0 14px 14px;
padding: 4px 28px 14px !important;
margin: 0 0 24px !important;
}
.WaGadgetMemberPublicProfile .captionOuterContainer + .sectionOuterContainer .inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 36px;
}
.WaGadgetMemberPublicProfile .sectionOuterContainer .fieldContainer {
padding: 14px 0 !important;
margin: 0 !important;
border-bottom: 1px solid #EEF3F0;
min-width: 0;
}
.WaGadgetMemberPublicProfile .sectionOuterContainer .fieldLabel {
display: block;
font-size: 12.5px;
font-weight: 500;
color: var(--pia-muted, #5A6786);
margin-bottom: 4px !important;
line-height: 1.4;
}
.WaGadgetMemberPublicProfile .sectionOuterContainer .fieldBody {
font-size: 15px;
font-weight: 500;
color: var(--pia-ink, #0C1E12) !important;
line-height: 1.45;
overflow-wrap: anywhere;
}
.WaGadgetMemberPublicProfile .sectionOuterContainer .fieldBody * { color: inherit; }
.WaGadgetMemberPublicProfile .sectionOuterContainer .fieldBody a { color: var(--pia-primary, #1A8C6A) !important; }
.WaGadgetMemberPublicProfile .fieldBody ul.list {
display: flex; flex-wrap: wrap; gap: 6px;
list-style: none !important; margin: 2px 0 0 !important; padding: 0 !important;
}
.WaGadgetMemberPublicProfile .fieldBody ul.list li {
margin: 0 !important;
padding: 4px 12px !important;
list-style: none !important;
border-radius: 999px;
background: var(--pia-tint, #F4F9F6) !important;
border: 1px solid #AFD7CB;
font-size: 13.5px;
}
@media (max-width: 760px) {
.WaGadgetMemberPublicProfile .profileHeaderContainer { padding: 30px 20px 24px !important; }
.WaGadgetMemberPublicProfile .memberDirectoryDetailsHeaderContainer h2 { font-size: 26px; }
.WaGadgetMemberPublicProfile .captionOuterContainer { padding: 20px 20px 4px !important; }
.WaGadgetMemberPublicProfile .captionOuterContainer + .sectionOuterContainer { padding: 4px 20px 10px !important; }
.WaGadgetMemberPublicProfile .captionOuterContainer + .sectionOuterContainer .inner { grid-template-columns: 1fr; }
}
/* ---------- 15. Login page (/Sys/Login) ---------- */
/* Page title: the Content gadget above the login gadget */
.WaGadgetContent:has(+ .WaGadgetAuthorizationRequired),
.WaGadgetContent:has(+ .WaGadgetResetPasswordRequest) {
max-width: 880px;
margin: 0 auto !important;
}
.WaGadgetContent:has(+ .WaGadgetAuthorizationRequired) h1,
.WaGadgetContent:has(+ .WaGadgetAuthorizationRequired) h2,
.WaGadgetContent:has(+ .WaGadgetAuthorizationRequired) h3,
.WaGadgetContent:has(+ .WaGadgetResetPasswordRequest) h1,
.WaGadgetContent:has(+ .WaGadgetResetPasswordRequest) h2,
.WaGadgetContent:has(+ .WaGadgetResetPasswordRequest) h3 {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 36px;
line-height: 1.1;
color: var(--pia-ink, #0C1E12);
margin: 8px 0 12px;
}
.WaGadgetContent:has(+ .WaGadgetAuthorizationRequired) :is(h1, h2, h3)::before,
.WaGadgetContent:has(+ .WaGadgetResetPasswordRequest) :is(h1, h2, h3)::before {
content: "Member portal";
display: block;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-primary, #1A8C6A);
margin-bottom: 8px;
}
.WaGadgetContent:has(+ .WaGadgetAuthorizationRequired) :is(h1, h2, h3)::after,
.WaGadgetContent:has(+ .WaGadgetResetPasswordRequest) :is(h1, h2, h3)::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--pia-gold, #F5B82E);
margin-top: 16px;
}
.WaGadgetContent:has(+ .WaGadgetAuthorizationRequired) p,
.WaGadgetContent:has(+ .WaGadgetResetPasswordRequest) p {
font-size: 15px;
color: var(--pia-body-col, #44507A);
margin: 0 0 24px;
}
/* Card: email form left, sign-in options right */
.WaGadgetAuthorizationRequired::before,
.WaGadgetAuthorizationRequired::after { display: none !important; content: none !important; }
.WaGadgetAuthorizationRequired {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 280px;
max-width: 880px;
margin: 0 auto 48px !important;
background: #fff;
border: 1px solid var(--pia-border, #DFF0E6);
border-top: 3px solid var(--pia-primary, #1A8C6A);
border-radius: 16px;
overflow: hidden;
font-family: var(--pia-font-body, 'Inter', sans-serif);
}
.WaGadgetAuthorizationRequired .authFormContainer {
grid-column: 1;
grid-row: 1;
padding: 32px 36px !important;
border: 0 !important;
float: none !important;
width: auto !important;
}
.WaGadgetAuthorizationRequired .openAuthFormContainer {
grid-column: 2;
grid-row: 1;
display: flex !important;
flex-direction: column;
justify-content: center;
padding: 32px 28px !important;
background: var(--pia-tint, #F4F9F6);
border: 0 !important;
border-left: 1px solid var(--pia-border, #DFF0E6) !important;
float: none !important;
width: auto !important;
max-width: none !important;
}
.WaGadgetAuthorizationRequired .openAuthFormContainer::before {
content: "Or sign in with";
display: block;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-muted, #5A6786);
margin-bottom: 14px;
}
.WaGadgetAuthorizationRequired .oAuthButtonsContainer {
display: flex;
flex-direction: column;
gap: 10px;
}
.WaGadgetAuthorizationRequired a.wa-authenticateLoginLink {
display: flex !important;
align-items: center;
gap: 10px;
width: 100% !important;
box-sizing: border-box;
margin: 0 !important;
padding: 10px 14px !important;
min-height: 44px;
background: #fff !important;
border: 1px solid #CBDCD3 !important;
border-radius: 8px !important;
box-shadow: none !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 14px;
color: var(--pia-ink, #0C1E12) !important;
text-decoration: none !important;
cursor: pointer;
transition: border-color .2s ease;
}
.WaGadgetAuthorizationRequired a.wa-authenticateLoginLink:hover { border-color: var(--pia-primary, #1A8C6A) !important; }
.WaGadgetAuthorizationRequired a.wa-authenticateLoginLink .authenticateLoginText {
color: var(--pia-ink, #0C1E12) !important;
background: none !important;
padding: 0 !important;
font: inherit !important;
}
.WaGadgetAuthorizationRequired a.wa-authenticateLoginLink .authenticateLoginIcon {
flex: 0 0 auto;
margin: 0 !important;
background-color: transparent !important;
}
/* Apple icon is white artwork: invert it for the white button */
.WaGadgetAuthorizationRequired a.wa-authenticateLoginLink.apple .authenticateLoginIcon { filter: invert(1); }
/* Email form */
.WaGadgetAuthorizationRequired .loginPageTable,
.WaGadgetAuthorizationRequired .loginPageTable tbody,
.WaGadgetAuthorizationRequired .loginPageTable tr,
.WaGadgetAuthorizationRequired .loginPageTable td {
display: block;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
}
.WaGadgetAuthorizationRequired #idLoginBox,
.WaGadgetAuthorizationRequired #idPasswordBox { margin: 0 0 18px !important; }
.WaGadgetAuthorizationRequired #idLoginBox > span.mandatory,
.WaGadgetAuthorizationRequired #idPasswordBox > span.mandatory {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--pia-ink, #0C1E12);
margin-bottom: 6px;
}
.WaGadgetAuthorizationRequired .mandatorySymbol { color: #C2410C !important; }
.WaGadgetAuthorizationRequired input[type="text"],
.WaGadgetAuthorizationRequired input[type="password"],
.WaGadgetAuthorizationRequired input[type="email"] {
width: 100% !important;
box-sizing: border-box;
height: 46px;
padding: 0 14px !important;
border: 1px solid #CBDCD3 !important;
border-radius: 8px !important;
background: #fff !important;
box-shadow: none !important;
font-family: var(--pia-font-body, 'Inter', sans-serif);
font-size: 15px;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetAuthorizationRequired input:focus {
outline: none;
border-color: var(--pia-primary, #1A8C6A) !important;
box-shadow: 0 0 0 3px rgba(26,140,106,.15) !important;
}
.WaGadgetAuthorizationRequired .password-wrapper { position: relative; }
.WaGadgetAuthorizationRequired .password-wrapper .toggle-password {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--pia-muted, #5A6786);
cursor: pointer;
}
.WaGadgetAuthorizationRequired #idRememberMe {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 22px !important;
font-size: 14px;
color: var(--pia-body-col, #44507A);
}
.WaGadgetAuthorizationRequired #idRememberMe input {
accent-color: var(--pia-primary, #1A8C6A);
width: 16px;
height: 16px;
margin: 0 !important;
}
.WaGadgetAuthorizationRequired #idSubmitBox {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
}
.WaGadgetAuthorizationRequired #idLoginButtonBox,
.WaGadgetAuthorizationRequired #idForgotLinkBox { float: none !important; margin: 0 !important; padding: 0 !important; }
.WaGadgetAuthorizationRequired input.loginButton {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif) !important;
font-weight: 600 !important;
font-size: 15px !important;
background: var(--pia-gold, #F5B82E) !important;
color: var(--pia-ink, #0C1E12) !important;
border: 0 !important;
border-radius: 8px !important;
padding: 13px 34px !important;
height: auto !important;
cursor: pointer;
box-shadow: none !important;
transition: background .2s ease, transform .15s ease;
}
.WaGadgetAuthorizationRequired input.loginButton:hover {
background: var(--pia-gold-deep, #D99410) !important;
transform: translateY(-1px);
}
.WaGadgetAuthorizationRequired #idForgotLinkBox a {
font-size: 14px;
font-weight: 500;
color: var(--pia-primary, #1A8C6A) !important;
}
/* ---------- 16. Reset password (/Sys/ResetPasswordRequest) ---------- */
.WaGadgetResetPasswordRequest {
max-width: 880px;
margin: 0 auto 48px !important;
font-family: var(--pia-font-body, 'Inter', sans-serif);
}
.WaGadgetResetPasswordRequest .formContainer {
max-width: 520px;
background: #fff;
border: 1px solid var(--pia-border, #DFF0E6) !important;
border-top: 3px solid var(--pia-primary, #1A8C6A) !important;
border-radius: 16px;
padding: 32px 36px !important;
}
.WaGadgetResetPasswordRequest .formContainer::before {
content: "Enter the email address for your account. We will send you a link to set a new password.";
display: block;
font-size: 14px;
line-height: 1.5;
color: var(--pia-body-col, #44507A);
margin-bottom: 22px;
}
.WaGadgetResetPasswordRequest .generalFieldsOuterContainer,
.WaGadgetResetPasswordRequest .generalFieldsContainer,
.WaGadgetResetPasswordRequest .inner { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
.WaGadgetResetPasswordRequest .fieldContainer { margin: 0 0 18px !important; padding: 0 !important; }
.WaGadgetResetPasswordRequest table,
.WaGadgetResetPasswordRequest tbody,
.WaGadgetResetPasswordRequest tr,
.WaGadgetResetPasswordRequest td {
display: block;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
}
.WaGadgetResetPasswordRequest .fieldLabel {
float: none !important;
width: auto !important;
text-align: left !important;
padding: 0 !important;
margin: 0 0 6px !important;
font-size: 13px;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetResetPasswordRequest .fieldLabel strong { font-weight: 600; }
.WaGadgetResetPasswordRequest #idButtonField .fieldLabel,
.WaGadgetResetPasswordRequest #idReCaptchaContainer .fieldLabel { display: none !important; }
.WaGadgetResetPasswordRequest .fieldBody { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.WaGadgetResetPasswordRequest .mandatorySymbol { color: #C2410C !important; }
.WaGadgetResetPasswordRequest .fieldBody .mandatorySymbol { display: block; font-size: 12.5px; margin-top: 6px; }
.WaGadgetResetPasswordRequest input.typeText {
width: 100% !important;
box-sizing: border-box;
height: 46px;
padding: 0 14px !important;
border: 1px solid #CBDCD3 !important;
border-radius: 8px !important;
box-shadow: none !important;
font-size: 15px;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetResetPasswordRequest input.typeText:focus {
outline: none;
border-color: var(--pia-primary, #1A8C6A) !important;
box-shadow: 0 0 0 3px rgba(26,140,106,.15) !important;
}
.WaGadgetResetPasswordRequest #idButtonField { margin-bottom: 0 !important; }
.WaGadgetResetPasswordRequest input.typeButton { margin: 0 !important; padding: 13px 34px !important; font-size: 15px !important; }
@media (max-width: 760px) {
.WaGadgetAuthorizationRequired { grid-template-columns: 1fr; }
.WaGadgetAuthorizationRequired .authFormContainer { padding: 24px 20px !important; }
.WaGadgetAuthorizationRequired .openAuthFormContainer {
grid-column: 1;
grid-row: 2;
border-left: 0 !important;
border-top: 1px solid var(--pia-border, #DFF0E6) !important;
padding: 24px 20px !important;
}
.WaGadgetResetPasswordRequest .formContainer { padding: 24px 20px !important; }
.WaGadgetContent:has(+ .WaGadgetAuthorizationRequired) :is(h1, h2, h3),
.WaGadgetContent:has(+ .WaGadgetResetPasswordRequest) :is(h1, h2, h3) { font-size: 28px; }
}
/* ---------- 17. Membership renewal (/Sys/MembershipRenewal) ---------- */
/* Page title */
.WaGadgetContent:has(+ .WaGadgetMembershipRenewal) {
max-width: 880px;
margin: 0 auto !important;
}
.WaGadgetContent:has(+ .WaGadgetMembershipRenewal) :is(h1, h2, h3) {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 40px;
line-height: 1.1;
color: var(--pia-ink, #0C1E12);
margin: 0 0 28px;
}
.WaGadgetContent:has(+ .WaGadgetMembershipRenewal) :is(h1, h2, h3)::before {
content: "Member portal";
display: block;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-primary, #1A8C6A);
margin-bottom: 8px;
}
.WaGadgetContent:has(+ .WaGadgetMembershipRenewal) :is(h1, h2, h3)::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--pia-gold, #F5B82E);
margin-top: 16px;
}
.WaGadgetMembershipRenewal {
max-width: 880px;
margin: 0 auto 48px !important;
font-family: var(--pia-font-body, 'Inter', sans-serif);
}
.WaGadgetMembershipRenewal .cornersContainer,
.WaGadgetMembershipRenewal .clearEndContainer,
.WaGadgetMembershipRenewal .fieldContainer[id=""],
.WaGadgetMembershipRenewal .fieldContainer:not([id]) { display: none !important; }
.WaGadgetMembershipRenewal .d1, .WaGadgetMembershipRenewal .d2, .WaGadgetMembershipRenewal .d3,
.WaGadgetMembershipRenewal .d4, .WaGadgetMembershipRenewal .d5, .WaGadgetMembershipRenewal .d6,
.WaGadgetMembershipRenewal .d7, .WaGadgetMembershipRenewal .d8, .WaGadgetMembershipRenewal .d9,
.WaGadgetMembershipRenewal .inner {
padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important;
}
/* Renewal summary: dark card, same as the profile membership card */
.WaGadgetMembershipRenewal .infoOuterContainer {
position: relative;
overflow: hidden;
background: var(--pia-ink, #0C1E12) !important;
border: 0 !important;
border-radius: 16px;
padding: 32px !important;
margin: 0 0 24px !important;
}
.WaGadgetMembershipRenewal .infoOuterContainer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--pia-spectrum, linear-gradient(90deg, #4FE3FF, #1A8C6A 35%, #A78BFA 65%, #F5B82E));
}
.WaGadgetMembershipRenewal .infoContainer,
.WaGadgetMembershipRenewal .infoContainer > .kvTable { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.WaGadgetMembershipRenewal .infoContainer .text {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.WaGadgetMembershipRenewal .infoContainer .text .kvTable { display: contents !important; }
.WaGadgetMembershipRenewal .infoSection {
display: block !important;
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 14px 16px !important;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
}
/* Level block: first, full width, no tile */
.WaGadgetMembershipRenewal .infoSection:has([id$="levelLabel"]) {
order: -1;
grid-column: 1 / -1;
background: none;
border: 0;
padding: 0 0 8px !important;
}
.WaGadgetMembershipRenewal .infoTitle {
float: none !important;
width: auto !important;
text-align: left !important;
padding: 0 !important;
margin: 0 0 6px !important;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,.55) !important;
}
.WaGadgetMembershipRenewal .infoSection:has([id$="levelLabel"]) .infoTitle { color: var(--pia-gold, #F5B82E) !important; font-size: 13px; letter-spacing: 1.5px; font-weight: 700; font-family: var(--pia-font-display, 'Space Grotesk', sans-serif); }
.WaGadgetMembershipRenewal .infoText {
float: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 17px;
color: #fff !important;
}
.WaGadgetMembershipRenewal .infoText .textLine { display: block; }
.WaGadgetMembershipRenewal [id$="levelLabel"] {
display: block;
font-weight: 700;
font-size: 34px;
line-height: 1.15;
color: #fff;
margin: 2px 0 10px;
}
.WaGadgetMembershipRenewal .levelPrice:empty { display: none; }
.WaGadgetMembershipRenewal .levelRenewal,
.WaGadgetMembershipRenewal .levelRecurring {
font-family: var(--pia-font-body, 'Inter', sans-serif);
font-weight: 400;
font-size: 13.5px;
color: rgba(255,255,255,.65);
}
.WaGadgetMembershipRenewal .textLine:has(.levelRenewal),
.WaGadgetMembershipRenewal .textLine:has(.levelRecurring) { display: inline-block; margin-right: 18px; }
/* Form card */
.WaGadgetMembershipRenewal .generalFormOuterContainer {
max-width: none !important;
margin: 0 !important;
padding: 32px 36px !important;
border: 1px solid var(--pia-border, #DFF0E6) !important;
border-top: 3px solid var(--pia-primary, #1A8C6A) !important;
border-radius: 16px !important;
background: #fff !important;
}
.WaGadgetMembershipRenewal .formTitleContainer {
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: 0 !important;
}
.WaGadgetMembershipRenewal .formTitle,
.WaGadgetMembershipRenewal .mandatoryFieldsTitle { display: block !important; float: none !important; }
.WaGadgetMembershipRenewal .formTitle { font-size: 26px !important; margin: 0 0 10px !important; }
.WaGadgetMembershipRenewal .mandatoryFieldsTitle { margin: 12px 0 0 !important; }
/* Group headings: eyebrow + gold rule, not big centred text */
.WaGadgetMembershipRenewal .captionOuterContainer {
margin: 28px 0 8px !important;
padding: 24px 0 0 !important;
border-top: 1px solid #EEF3F0 !important;
background: none !important;
}
.WaGadgetMembershipRenewal .captionContainer { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
.WaGadgetMembershipRenewal .captionOuterContainer .fieldLabel { display: none !important; }
.WaGadgetMembershipRenewal .captionOuterContainer .fieldBody { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.WaGadgetMembershipRenewal .captionOuterContainer h4,
.WaGadgetMembershipRenewal .captionOuterContainer h4 * {
margin: 0 !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif) !important;
font-weight: 700 !important;
font-size: 13px !important;
line-height: 1.3 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
text-align: left !important;
color: var(--pia-primary, #1A8C6A) !important;
}
.WaGadgetMembershipRenewal .captionOuterContainer h4::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--pia-gold, #F5B82E);
margin-top: 10px;
}
/* Fields: two columns */
.WaGadgetMembershipRenewal .sectionOuterContainer,
.WaGadgetMembershipRenewal .sectionContainer { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
.WaGadgetMembershipRenewal .sectionContainer .inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 28px;
}
.WaGadgetMembershipRenewal .sectionContainer .fieldContainer {
margin: 0 !important;
padding: 12px 0 !important;
min-width: 0;
}
.WaGadgetMembershipRenewal .sectionContainer .fieldContainer:is(.groupContainer, :has(.multiLinesContainer)) { grid-column: 1 / -1; }
.WaGadgetMembershipRenewal .fieldSubContainer { margin: 0 !important; }
.WaGadgetMembershipRenewal .fieldLabel { font-weight: 600 !important; }
.WaGadgetMembershipRenewal .fieldLabel .mandatorySymbol { color: #C2410C !important; visibility: visible !important; }
.WaGadgetMembershipRenewal .fieldBody input.typeText,
.WaGadgetMembershipRenewal .fieldBody input[type="text"],
.WaGadgetMembershipRenewal .fieldBody textarea,
.WaGadgetMembershipRenewal .fieldBody select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
padding: 10px 12px !important;
border: 1px solid #CBDCD3 !important;
border-radius: 8px !important;
background: #fff !important;
box-shadow: none !important;
font-family: var(--pia-font-body, 'Inter', sans-serif);
font-size: 15px;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetMembershipRenewal .fieldBody textarea { min-height: 96px; }
.WaGadgetMembershipRenewal .fieldBody :is(input, textarea, select):focus {
outline: none;
border-color: var(--pia-primary, #1A8C6A) !important;
box-shadow: 0 0 0 3px rgba(26,140,106,.15) !important;
}
.WaGadgetMembershipRenewal .typeInstruction {
display: block;
font-size: 12.5px;
font-style: normal !important;
color: var(--pia-muted, #5A6786);
margin-top: 6px;
line-height: 1.45;
}
.WaGadgetMembershipRenewal .groupBodyVertical {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 24px;
margin-top: 4px;
}
.WaGadgetMembershipRenewal .fieldItem {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
color: var(--pia-ink, #0C1E12);
}
.WaGadgetMembershipRenewal .fieldItem input[type="checkbox"],
.WaGadgetMembershipRenewal .fieldItem input[type="radio"] {
accent-color: var(--pia-primary, #1A8C6A);
width: 16px;
height: 16px;
margin: 2px 0 0 !important;
}
.WaGadgetMembershipRenewal .validationError { display: block; font-size: 12.5px; color: #B91C1C !important; margin-top: 6px; }
/* Buttons: Cancel left (outline), Next right (gold) */
.WaGadgetMembershipRenewal .navigationContainer .inner {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.WaGadgetMembershipRenewal .navigationContainer .left,
.WaGadgetMembershipRenewal .navigationContainer .right { float: none !important; width: auto !important; display: flex !important; align-items: center; gap: 12px; }
.WaGadgetMembershipRenewal .navigationTopContainer { margin: 0 0 20px !important; padding: 0 0 20px !important; border-bottom: 1px solid #EEF3F0; }
.WaGadgetMembershipRenewal .formOuterContainer + .navigationOuterContainer,
.WaGadgetMembershipRenewal .formOuterContainer ~ .navigationOuterContainer { margin-top: 24px !important; padding-top: 20px !important; border-top: 1px solid #EEF3F0; }
.WaGadgetMembershipRenewal input[id*="cancel" i] {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif) !important;
font-weight: 600 !important;
font-size: 15px !important;
padding: 11px 24px !important;
border-radius: 8px !important;
background: #fff !important;
color: var(--pia-primary, #1A8C6A) !important;
border: 0 !important;
box-shadow: inset 0 0 0 1.5px var(--pia-primary, #1A8C6A) !important;
cursor: pointer;
}
.WaGadgetMembershipRenewal input[id*="cancel" i]:hover { background: var(--pia-tint, #F4F9F6) !important; transform: none; }
.WaGadgetMembershipRenewal input.nextButtonAutoWidth,
.WaGadgetMembershipRenewal input[id$="nextTop"],
.WaGadgetMembershipRenewal input[id$="_next"] {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif) !important;
font-weight: 600 !important;
font-size: 15px !important;
background: var(--pia-gold, #F5B82E) !important;
color: var(--pia-ink, #0C1E12) !important;
border: 0 !important;
border-radius: 8px !important;
padding: 12px 28px !important;
cursor: pointer;
width: auto !important;
}
.WaGadgetMembershipRenewal input.nextButtonAutoWidth:hover { background: var(--pia-gold-deep, #D99410) !important; }
@media (max-width: 760px) {
.WaGadgetContent:has(+ .WaGadgetMembershipRenewal) :is(h1, h2, h3) { font-size: 30px; }
.WaGadgetMembershipRenewal .infoOuterContainer { padding: 28px 20px 20px !important; }
.WaGadgetMembershipRenewal [id$="levelLabel"] { font-size: 26px; }
.WaGadgetMembershipRenewal .generalFormOuterContainer { padding: 24px 20px !important; }
.WaGadgetMembershipRenewal .sectionContainer .inner,
.WaGadgetMembershipRenewal .groupBodyVertical { grid-template-columns: 1fr; }
}
/* Renewal step 2: Review and confirm */
/* WA's blue info box becomes the dark summary card */
.WaGadgetMembershipRenewal .commonMessageBox { margin: 0 0 24px !important; padding: 0 !important; }
.WaGadgetMembershipRenewal .confirmWindowInfo .cww { display: none !important; }
.WaGadgetMembershipRenewal .confirmWindowInfo .cww-inner {
position: relative;
overflow: hidden;
background: var(--pia-ink, #0C1E12) !important;
background-image: none !important;
border: 0 !important;
border-radius: 16px;
padding: 32px !important;
margin: 0 !important;
}
.WaGadgetMembershipRenewal .confirmWindowInfo .cww-inner::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--pia-spectrum, linear-gradient(90deg, #4FE3FF, #1A8C6A 35%, #A78BFA 65%, #F5B82E));
}
.WaGadgetMembershipRenewal .confirmWindowInfo .cww-co { padding: 0 !important; margin: 0 !important; background: none !important; }
.WaGadgetMembershipRenewal .confirmWindowInfo .header {
padding: 0 !important;
margin: 0 0 6px !important;
background: none !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 13px !important;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-gold, #F5B82E) !important;
}
.WaGadgetMembershipRenewal .confirmWindowInfo .kvTable { margin: 0 !important; padding: 0 !important; width: auto !important; }
.WaGadgetMembershipRenewal #confirmationTable,
.WaGadgetMembershipRenewal #confirmationTable tbody { display: block; width: 100% !important; border: 0 !important; background: none !important; }
.WaGadgetMembershipRenewal #confirmationTable tbody {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.WaGadgetMembershipRenewal #confirmationTable tr {
display: block;
padding: 14px 16px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
}
.WaGadgetMembershipRenewal #confirmationTable td {
display: block;
width: auto !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
text-align: left !important;
}
.WaGadgetMembershipRenewal #confirmationTable td.labelInfoColumn {
margin: 0 0 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,.55) !important;
}
.WaGadgetMembershipRenewal #confirmationTable td.infoColumn {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 17px;
color: #fff !important;
}
/* Level row: first, full width, large name, no tile */
.WaGadgetMembershipRenewal #confirmationTable tr:has(.levelRenewal) {
order: -1;
grid-column: 1 / -1;
padding: 0 0 8px;
background: none;
border: 0;
}
.WaGadgetMembershipRenewal #confirmationTable tr:has(.levelRenewal) td.labelInfoColumn { display: none; }
.WaGadgetMembershipRenewal #confirmationTable tr:has(.levelRenewal) td.infoColumn > span:first-child > span:first-child {
display: block;
font-weight: 700;
font-size: 34px;
line-height: 1.15;
color: #fff;
margin: 4px 0 10px;
}
.WaGadgetMembershipRenewal #confirmationTable tr:has(.levelRenewal) td.infoColumn > div {
display: inline-block;
margin-right: 18px;
}
/* Read-only profile values: label above value, like My profile */
.WaGadgetMembershipRenewal .labeledTextContainer .fieldLabel,
.WaGadgetMembershipRenewal .pictureViewContainer .fieldLabel {
display: block;
float: none !important;
width: auto !important;
font-family: var(--pia-font-body, 'Inter', sans-serif) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: var(--pia-muted, #5A6786) !important;
margin: 0 0 4px !important;
}
.WaGadgetMembershipRenewal .labeledTextContainer .fieldBody,
.WaGadgetMembershipRenewal .pictureViewContainer .fieldBody {
float: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: var(--pia-ink, #0C1E12) !important;
overflow-wrap: anywhere;
}
.WaGadgetMembershipRenewal .labeledTextContainer .fieldBody * { color: inherit; }
.WaGadgetMembershipRenewal .labeledTextContainer .fieldBody a { color: var(--pia-primary, #1A8C6A) !important; }
.WaGadgetMembershipRenewal .sectionContainer .fieldContainer:is(.simpleTextContainer, .pictureViewContainer) {
border-bottom: 1px solid #EEF3F0;
}
.WaGadgetMembershipRenewal .labeledTextContainer .fieldBody > span:empty::after,
.WaGadgetMembershipRenewal .pictureViewContainer .fieldBody > span:empty::after {
content: "Not provided";
font-weight: 400;
font-style: italic;
color: #9AA5B8;
}
.WaGadgetMembershipRenewal .fieldBody ul.list {
display: flex; flex-wrap: wrap; gap: 6px;
list-style: none !important; margin: 2px 0 0 !important; padding: 0 !important;
}
.WaGadgetMembershipRenewal .fieldBody ul.list li {
margin: 0 !important;
list-style: none !important;
background: none !important;
}
.WaGadgetMembershipRenewal .fieldBody ul.list li:not(:has(a)) {
padding: 4px 12px !important;
border-radius: 999px;
background: var(--pia-tint, #F4F9F6) !important;
border: 1px solid #AFD7CB;
font-size: 13.5px;
}
.WaGadgetMembershipRenewal .fieldBody ul.list li.checked:has(a)::before {
content: "\2713";
color: var(--pia-primary, #1A8C6A);
font-weight: 700;
margin-right: 6px;
}
/* Back button: outline, same as Cancel */
.WaGadgetMembershipRenewal input[id*="prev" i] {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif) !important;
font-weight: 600 !important;
font-size: 15px !important;
padding: 11px 24px !important;
border-radius: 8px !important;
background: #fff !important;
color: var(--pia-primary, #1A8C6A) !important;
border: 0 !important;
box-shadow: inset 0 0 0 1.5px var(--pia-primary, #1A8C6A) !important;
cursor: pointer;
}
.WaGadgetMembershipRenewal input[id*="prev" i]:hover { background: var(--pia-tint, #F4F9F6) !important; transform: none; }
/* Empty form block above the buttons on this step */
.WaGadgetMembershipRenewal .formOuterContainer:not(:has(.fieldContainer, .formTitle)) { display: none !important; }
@media (max-width: 760px) {
.WaGadgetMembershipRenewal .confirmWindowInfo .cww-inner { padding: 28px 20px 20px !important; }
.WaGadgetMembershipRenewal #confirmationTable tr:has(.levelRenewal) td.infoColumn > span:first-child > span:first-child { font-size: 26px; }
}
/* ---------- 10. Mobile ---------- */
@media (max-width: 760px) {
.WaGadgetContent:has(+ .WaGadgetContactProfile) h2 { font-size: 30px; }
.WaGadgetContactProfile #idCaptionMembershipDetailsContainer { padding: 28px 20px 4px !important; }
.WaGadgetContactProfile #idSectionMembershipLevelContainer { padding: 8px 20px 24px !important; }
.WaGadgetContactProfile #idSectionMembershipLevelContainer .inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.WaGadgetContactProfile #idMembershipLevelContainer .labelTitle { font-size: 26px; }
.WaGadgetContactProfile [id^="idCaptionContainer"],
.WaGadgetContactProfile #idSocialLoginContainer { padding: 20px 20px 4px !important; }
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer { padding: 4px 20px 10px !important; }
.WaGadgetContactProfile #idSocialLoginContainer ~ #socialLoginContainer { padding: 12px 20px !important; }
.WaGadgetContactProfile [id^="idCaptionContainer"] + .sectionOuterContainer .inner { grid-template-columns: 1fr; }
.WaGadgetContactProfile .profileDetailsContainer,
.WaGadgetContactProfile .memberSubscriptionsContainer { padding: 18px 16px !important; overflow-x: auto; }
.WaGadgetContactProfile .groupBodyVertical { grid-template-columns: 1fr; }
.WaGadgetContactProfile .genericListHeaderContainer td.infoContainer { margin-left: 0; }
.WaGadgetContactProfile .genericListHeaderContainer input.searchBox,
.WaGadgetContactProfile .genericListHeaderContainer select { min-width: 0; width: 100%; }
.WaGadgetContactProfile .genericListHeaderContainer td.searchBox { flex: 1 1 100%; }
}
.WaGadgetContactProfile #idSectionMembershipLevelContainer { margin-top: -1px !important; padding-top: 9px !important; }
/* ============================================================
PIA - Member badge components
Used by Custom HTML gadgets on /join, /member-toolkit,
/founding-member-toolkit and the Member profile system page.
============================================================ */
/* Join page badge section (.pia-jb) */
.pia-jb{font-family:var(--pia-font-body,'Inter',sans-serif);color:var(--pia-body-col,#44507A);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border:1px solid var(--pia-border,#DFF0E6);border-radius:14px;overflow:hidden;background:#fff;margin:8px 0 28px}
.pia-jb *{box-sizing:border-box}
.pia-jb-text{padding:32px 32px 30px}
.pia-jb-eyebrow{font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pia-primary,#1A8C6A);margin:0}
.pia-jb-rule{width:56px;height:3px;border-radius:2px;background:var(--pia-gold,#F5B82E);margin:10px 0 18px}
.pia-jb h3.pia-jb-title{font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:26px;line-height:1.2;color:var(--pia-ink,#0C1E12);margin:0 0 12px}
.pia-jb p{font-size:15px;line-height:1.6;margin:0 0 18px}
.pia-jb ul{list-style:none;margin:0;padding:0}
.pia-jb li{position:relative;padding:0 0 10px 26px;font-size:14.5px;line-height:1.5;color:var(--pia-ink,#0C1E12)}
.pia-jb li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:700;color:var(--pia-primary,#1A8C6A)}
.pia-jb-art{position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:36px 32px;background:#132818;background-image:radial-gradient(120% 120% at 100% 0%,rgba(26,140,106,.38) 0%,rgba(19,40,24,0) 60%)}
.pia-jb-art::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#4FE3FF,#1A8C6A 35%,#A78BFA 65%,#F5B82E)}
.pia-jb-art img{display:block;width:100%;max-width:320px;height:auto;margin:0 auto}
.pia-jb-art img.is-light{box-shadow:0 10px 30px rgba(0,0,0,.35);border-radius:12px}
.pia-jb-note{font-size:12.5px;color:rgba(255,255,255,.6);text-align:center;margin:2px 0 0}
@media (max-width:760px){.pia-jb{grid-template-columns:1fr}.pia-jb-text{padding:24px 20px}.pia-jb h3.pia-jb-title{font-size:22px}.pia-jb-art{padding:28px 20px}.pia-jb-art::before{left:0;right:0;top:0;bottom:auto;width:auto;height:4px;background:linear-gradient(90deg,#4FE3FF,#1A8C6A 35%,#A78BFA 65%,#F5B82E)}}
/* Member and Founding toolkit pages (.pia-tk) */
.pia-tk{font-family:var(--pia-font-body,'Inter',sans-serif);color:var(--pia-body-col,#44507A);max-width:1040px;margin:0 auto}
.pia-tk *{box-sizing:border-box}
.pia-tk-eyebrow{font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pia-primary,#1A8C6A);margin:0 0 8px}
.pia-tk-rule{width:56px;height:3px;border-radius:2px;background:var(--pia-gold,#F5B82E);margin:16px 0 0}
.pia-tk h2.pia-tk-title{font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:40px;line-height:1.1;color:var(--pia-ink,#0C1E12);margin:0}
.pia-tk-lead{font-size:16px;line-height:1.6;max-width:680px;margin:20px 0 32px}
.pia-tk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 28px}
.pia-tk-card{border:1px solid var(--pia-border,#DFF0E6);border-radius:14px;overflow:hidden;background:#fff}
.pia-tk-preview{display:flex;align-items:center;justify-content:center;padding:36px 24px;min-height:170px}
.pia-tk-preview.is-light{background:#F4F9F6}
.pia-tk-preview.is-dark{background:#132818}
.pia-tk-preview img{width:100%;max-width:300px;height:auto;display:block}
.pia-tk-body{padding:18px 22px 22px}
.pia-tk-body h3{font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:17px;color:var(--pia-ink,#0C1E12);margin:0 0 4px}
.pia-tk-body p{font-size:13.5px;margin:0 0 14px;color:var(--pia-muted,#5A6786)}
.pia-tk-dl{display:flex;flex-wrap:wrap;gap:8px}
.pia-tk-dl a{display:inline-flex;align-items:center;font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:600;font-size:13.5px;padding:8px 14px;border-radius:8px;text-decoration:none !important;border:1.5px solid var(--pia-primary,#1A8C6A);color:var(--pia-primary,#1A8C6A) !important;background:#fff;transition:background .2s ease}
.pia-tk-dl a:hover{background:#F4F9F6}
.pia-tk-dl a.is-primary{background:var(--pia-gold,#F5B82E);border-color:var(--pia-gold,#F5B82E);color:var(--pia-ink,#0C1E12) !important}
.pia-tk-dl a.is-primary:hover{background:var(--pia-gold-deep,#D99410);border-color:var(--pia-gold-deep,#D99410)}
.pia-tk-section{border:1px solid var(--pia-border,#DFF0E6);border-top:3px solid var(--pia-primary,#1A8C6A);border-radius:14px;background:#fff;padding:24px 28px;margin:0 0 24px}
.pia-tk-section.is-gold{border-top-color:#F5B82E}.pia-tk-section.is-teal{border-top-color:#0E7490}.pia-tk-section.is-violet{border-top-color:#6D28D9}
.pia-tk-section h3{font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pia-primary,#1A8C6A);margin:0}
.pia-tk-section h3::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--pia-gold,#F5B82E);margin:10px 0 16px}
.pia-tk-section p{font-size:14.5px;line-height:1.6;margin:0 0 14px}
.pia-tk-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pia-tk-rules h4{font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:15px;color:var(--pia-ink,#0C1E12);margin:0 0 8px}
.pia-tk-rules ul{margin:0;padding:0;list-style:none}
.pia-tk-rules li{position:relative;padding:0 0 8px 24px;font-size:14px;line-height:1.5}
.pia-tk-rules li::before{position:absolute;left:0;top:0;font-weight:700}
.pia-tk-rules .is-do li::before{content:"\2713";color:#1A8C6A}
.pia-tk-rules .is-dont li::before{content:"\2715";color:#B91C1C}
.pia-tk-all{margin:-12px 0 28px}.pia-tk-all a{font-size:15px;padding:12px 24px}
.pia-tk-note{display:block;background:#FEFBF2;border:1px solid #FCE6B6;border-radius:12px;padding:16px 18px;font-size:14px;line-height:1.55}
.pia-tk-note strong{color:var(--pia-ink,#0C1E12)}
@media (max-width:760px){.pia-tk h2.pia-tk-title{font-size:30px}.pia-tk-grid,.pia-tk-rules{grid-template-columns:1fr}.pia-tk-section{padding:20px}}
/* Profile badge strip (.pia-badge-strip) */
.pia-badge-strip{display:none;grid-column:1 / -1;margin-top:8px;padding:18px 20px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);align-items:center;gap:20px;flex-wrap:wrap}
.pia-badge-strip.is-on{display:flex}
.pia-badge-strip img{width:196px;height:auto;display:block;flex:0 0 auto}
.pia-badge-strip-text{flex:1 1 220px;min-width:0}
.pia-badge-strip-text strong{display:block;font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:600;font-size:16px;color:#fff;margin:0 0 4px}
.pia-badge-strip-text span{display:block;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.65)}
.pia-badge-strip a.pia-badge-strip-btn{flex:0 0 auto;display:inline-flex;align-items:center;font-family:var(--pia-font-display,'Space Grotesk',sans-serif);font-weight:600;font-size:14px;padding:10px 20px;border-radius:8px;background:var(--pia-gold,#F5B82E);color:var(--pia-ink,#0C1E12) !important;text-decoration:none !important;transition:background .2s ease}
.pia-badge-strip a.pia-badge-strip-btn:hover{background:var(--pia-gold-deep,#D99410)}
@media (max-width:760px){.pia-badge-strip{padding:16px}.pia-badge-strip img{width:180px}.pia-badge-strip a.pia-badge-strip-btn{width:100%;justify-content:center}}
.pia-badge-strip, .pia-badge-strip * { box-sizing: border-box; }
.WaGadgetMemberPublicProfile #membershipDetailsContainer:not(:has(+ .sectionOuterContainer)) { display: none !important; }
/* ===== PIA join page: membership level cards ===== */
#idMembershipLevelRadioGroupContainer .fieldSubContainer { display: block !important; }
#idMembershipLevelRadioGroupContainer .fieldLabel { display: none !important; }
#idMembershipLevelRadioGroupContainer .fieldBody { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
#idMembershipLevelRadioGroupContainer .groupBodyVertical {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin: 8px 0 0;
}
@media (max-width: 720px) {
#idMembershipLevelRadioGroupContainer .groupBodyVertical { grid-template-columns: 1fr; }
}
/* Card */
#idMembershipLevelRadioGroupContainer .fieldItem {
position: relative;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 2px solid #AFD7CB;
border-radius: 8px;
background: #F6FAF9;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
cursor: pointer;
}
#idMembershipLevelRadioGroupContainer .fieldItem:nth-child(2) {
border-color: #CCB4F2;
background: #F9F6FD;
}
#idMembershipLevelRadioGroupContainer .fieldItem:hover { box-shadow: 0 4px 16px rgba(12, 30, 18, .08); }
#idMembershipLevelRadioGroupContainer .fieldItem.pia-selected {
border-color: #F5B82E !important;
background: #FEFBF2 !important;
box-shadow: 0 0 0 3px rgba(245, 184, 46, .25);
}
/* Radio: top right of the card */
#idMembershipLevelRadioGroupContainer .typeRadioContainer {
position: absolute;
top: 24px;
right: 22px;
margin: 0 !important;
}
#idMembershipLevelRadioGroupContainer .typeRadio {
width: 20px; height: 20px; margin: 0; accent-color: #1A8C6A; cursor: pointer;
}
/* Whole card is the label */
#idMembershipLevelRadioGroupContainer .fieldItem > .label { display: block !important; margin: 0 !important; padding: 0 !important; }
#idMembershipLevelRadioGroupContainer label.levelProperties {
display: flex !important;
flex-direction: column;
gap: 10px;
padding: 22px 22px 24px;
margin: 0 !important;
cursor: pointer;
font-family: Inter, sans-serif;
}
#idMembershipLevelRadioGroupContainer .textLine { display: block !important; margin: 0 !important; padding: 0 !important; }
#idMembershipLevelRadioGroupContainer .levelProperties > .textLine:first-child { padding-right: 36px !important; }
#idMembershipLevelRadioGroupContainer .textLine.pia-empty { display: none !important; }
/* Title */
#idMembershipLevelRadioGroupContainer .labelTitle {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.2;
color: #0C1E12;
}
#idMembershipLevelRadioGroupContainer .labelSubTitle { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
/* Price pill */
#idMembershipLevelRadioGroupContainer .levelPrice {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: .5px;
color: #0C1E12;
background: #F5B82E;
}
#idMembershipLevelRadioGroupContainer .levelPrice:empty::before { content: 'Free for 2027'; color: #0C1E12 !important; }
/* Seats pill */
#idMembershipLevelRadioGroupContainer .levelBundle {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 13px;
color: #6D28D9;
background: #fff;
}
/* Pills: same shape and height */
#idMembershipLevelRadioGroupContainer .labelSubTitle .levelPrice,
#idMembershipLevelRadioGroupContainer .labelSubTitle .levelBundle {
display: inline-flex !important;
align-items: center !important;
box-sizing: border-box !important;
height: 26px !important;
min-height: 0 !important;
padding: 0 12px !important;
margin: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
vertical-align: middle !important;
border-radius: 999px !important;
}
#idMembershipLevelRadioGroupContainer .labelSubTitle .levelPrice { color: #0C1E12 !important; border: 1px solid #F5B82E !important; }
#idMembershipLevelRadioGroupContainer .labelSubTitle .levelBundle { border: 1px solid #CCB4F2 !important; }
#idMembershipLevelRadioGroupContainer .labelSubTitle .levelBundle::before,
#idMembershipLevelRadioGroupContainer .labelSubTitle .levelBundle::after { content: none !important; display: none !important; }
/* System lines */
#idMembershipLevelRadioGroupContainer .levelRecurring { display: none !important; }
#idMembershipLevelRadioGroupContainer .textLine:has(.levelRecurring) { display: none !important; }
#idMembershipLevelRadioGroupContainer .levelRenewal {
display: block;
font-size: 13px;
color: #5A6786;
}
/* Description */
#idMembershipLevelRadioGroupContainer .levelDescription {
display: block;
font-size: 15px;
line-height: 1.6;
color: #44507A;
padding-top: 12px;
border-top: 1px solid #DFF0E6;
}
/* "Join as" buttons (Who should join section) */
.pia-join-as { margin-top: 20px; }
/* ============================================================
PIA - Member profile: card order + "Your team" (bundle) card
============================================================ */
/* ---------- 1. Card order ---------- */
.WaGadgetContactProfile .inner:has(> #idCaptionContainer0) {
display: flex !important;
flex-direction: column;
}
.WaGadgetContactProfile #idCaptionMembershipDetailsContainer,
.WaGadgetContactProfile #idSectionMembershipLevelContainer { order: 1; }
.WaGadgetContactProfile #idCaptionContainer0,
.WaGadgetContactProfile #idCaptionContainer0 + .sectionOuterContainer { order: 2; } /* User ID line */
.WaGadgetContactProfile #idCaptionContainer18319726,
.WaGadgetContactProfile #idCaptionContainer18319726 + .sectionOuterContainer { order: 3; } /* Your details */
.WaGadgetContactProfile #idCaptionContainer18333367,
.WaGadgetContactProfile #idCaptionContainer18333367 + .sectionOuterContainer { order: 4; } /* Your personal settings */
.WaGadgetContactProfile #idCaptionContainer18319728,
.WaGadgetContactProfile #idCaptionContainer18319728 + .sectionOuterContainer { order: 5; } /* Communications & privacy */
.WaGadgetContactProfile #idCaptionContainer18319727,
.WaGadgetContactProfile #idCaptionContainer18319727 + .sectionOuterContainer { order: 6; } /* Your organisation */
.WaGadgetContactProfile #idCaptionContainer18333358,
.WaGadgetContactProfile #idCaptionContainer18333358 + .sectionOuterContainer { order: 7; } /* Organisation details */
.WaGadgetContactProfile #idCaptionGroupAccountContainer,
.WaGadgetContactProfile #idSectionGroupAccountContainer { order: 8; } /* Your team */
.WaGadgetContactProfile .inner:has(> #idCaptionContainer0) > [id$="MemberForm_ctl00"],
.WaGadgetContactProfile .inner:has(> #idCaptionContainer0) > .clearEndContainer { order: 99; }
/* Card top colours for the new order */
.WaGadgetContactProfile #idCaptionContainer18319726 { border-top-color: #6D28D9; } /* Your details */
.WaGadgetContactProfile #idCaptionContainer18333367 { border-top-color: #F5B82E; } /* Personal settings */
.WaGadgetContactProfile #idCaptionContainer18319728 { border-top-color: #1A8C6A; } /* Communications */
.WaGadgetContactProfile #idCaptionContainer18319727 { border-top-color: #0E7490; } /* Your organisation */
.WaGadgetContactProfile #idCaptionContainer18333358 { border-top-color: #6D28D9; } /* Organisation details */
/* Optional: hide the User ID line. Delete this rule to show it again. */
.WaGadgetContactProfile #idCaptionContainer0 + .sectionOuterContainer { display: none !important; }
/* ---------- 2. "Your team" card ---------- */
.WaGadgetContactProfile #idCaptionGroupAccountContainer {
background: #fff;
border: 1px solid var(--pia-border, #DFF0E6);
border-bottom: 0;
border-top: 3px solid var(--pia-gold, #F5B82E);
border-radius: 14px 14px 0 0;
padding: 24px 28px 6px !important;
margin: 0 !important;
}
.WaGadgetContactProfile #idCaptionGroupAccountContainer .fieldLabel { display: none !important; }
.WaGadgetContactProfile #idCaptionGroupAccountContainer h4 {
margin: 0 !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 13px !important;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pia-primary, #1A8C6A) !important;
}
.WaGadgetContactProfile #idCaptionGroupAccountContainer h4::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 2px;
background: var(--pia-gold, #F5B82E);
margin-top: 10px;
}
.WaGadgetContactProfile #idSectionGroupAccountContainer {
background: #fff;
border: 1px solid var(--pia-border, #DFF0E6);
border-top: 0;
border-radius: 0 0 14px 14px;
padding: 10px 28px 26px !important;
margin: 0 0 24px !important;
}
.WaGadgetContactProfile #idSectionGroupAccountContainer .inner {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
}
.WaGadgetContactProfile #idSectionGroupAccountContainer .clearEndContainer { display: none !important; }
/* Fallback (no script): two small stat tiles */
.WaGadgetContactProfile #idSectionGroupAccountContainer .simpleTextContainer {
margin: 0 !important;
padding: 12px 16px !important;
border: 1px solid var(--pia-border, #DFF0E6);
border-radius: 10px;
background: var(--pia-tint, #F4F9F6);
}
.WaGadgetContactProfile #idSectionGroupAccountContainer .simpleTextContainer .fieldLabel {
font-size: 12px; color: var(--pia-muted, #5A6786); margin: 0 0 2px !important;
}
.WaGadgetContactProfile #idSectionGroupAccountContainer .simpleTextContainer .fieldBody {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700; font-size: 18px; color: var(--pia-ink, #0C1E12);
}
/* With script: summary block replaces the tiles */
.WaGadgetContactProfile #idSectionGroupAccountContainer.pia-team-on .simpleTextContainer { display: none !important; }
.pia-team { flex: 1 1 320px; min-width: 0; }
.pia-team-count {
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
font-size: 24px;
line-height: 1.2;
color: var(--pia-ink, #0C1E12);
}
.pia-team-bar {
height: 8px;
max-width: 420px;
margin: 12px 0 10px;
border-radius: 999px;
background: #EEF3F0;
overflow: hidden;
}
.pia-team-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--pia-primary, #1A8C6A);
}
.pia-team-note {
font-size: 14px;
line-height: 1.55;
color: var(--pia-muted, #5A6786);
max-width: 520px;
}
.WaGadgetContactProfile #idSectionGroupAccountContainer .actionButtonContainer { margin: 0 !important; padding: 0 !important; }
.WaGadgetContactProfile #idSectionGroupAccountContainer .actionButtonContainer input.typeButton {
margin: 0 !important;
padding: 12px 26px !important;
font-size: 15px !important;
}
@media (max-width: 760px) {
.WaGadgetContactProfile #idCaptionGroupAccountContainer { padding: 20px 20px 4px !important; }
.WaGadgetContactProfile #idSectionGroupAccountContainer { padding: 8px 20px 22px !important; }
.WaGadgetContactProfile #idSectionGroupAccountContainer .actionButtonContainer,
.WaGadgetContactProfile #idSectionGroupAccountContainer .actionButtonContainer input.typeButton { width: 100%; }
}
/* ---------- PIA profile: "Your team" strip in the Membership card ---------- */
.WaGadgetContactProfile.pia-team-moved #idCaptionGroupAccountContainer,
.WaGadgetContactProfile.pia-team-moved #idSectionGroupAccountContainer { display: none !important; }
.WaGadgetContactProfile .pia-team-strip {
grid-column: 1 / -1;
order: 10;
box-sizing: border-box;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 8px;
padding: 18px 20px;
border-radius: 12px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .12);
}
.WaGadgetContactProfile #idSectionMembershipLevelContainer .pia-badge-strip { order: 11; }
.WaGadgetContactProfile .pia-team-strip * { box-sizing: border-box; }
.WaGadgetContactProfile .pia-team-strip-text { flex: 1 1 260px; min-width: 0; }
.WaGadgetContactProfile .pia-team-strip-label {
display: block;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
margin: 0 0 6px;
}
.WaGadgetContactProfile .pia-team-strip-count {
display: block;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 17px;
color: #fff;
}
.WaGadgetContactProfile .pia-team-strip-bar {
height: 6px;
max-width: 360px;
margin: 10px 0 8px;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
overflow: hidden;
}
.WaGadgetContactProfile .pia-team-strip-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: #3FC79A;
}
.WaGadgetContactProfile .pia-team-strip-note {
display: block;
font-size: 13.5px;
line-height: 1.5;
color: rgba(255, 255, 255, .65);
}
.WaGadgetContactProfile .pia-team-strip input.typeButton.pia-team-strip-btn {
flex: 0 0 auto;
margin: 0 !important;
padding: 10px 20px !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif) !important;
font-weight: 600 !important;
font-size: 14px !important;
line-height: 1.2 !important;
border: 0 !important;
border-radius: 8px !important;
background: var(--pia-gold, #F5B82E) !important;
color: var(--pia-ink, #0C1E12) !important;
box-shadow: none !important;
cursor: pointer;
transition: background .2s ease;
}
.WaGadgetContactProfile .pia-team-strip input.typeButton.pia-team-strip-btn:hover {
background: var(--pia-gold-deep, #D99410) !important;
}
@media (max-width: 760px) {
.WaGadgetContactProfile .pia-team-strip { padding: 16px; }
.WaGadgetContactProfile .pia-team-strip input.typeButton.pia-team-strip-btn { width: 100%; }
}
/* ---------- PIA profile: tidy the line under the membership level name ---------- */
/* Bundle size, subscription period and renewal type already show in the strip and the tiles */
.WaGadgetContactProfile #idMembershipLevelContainer .typeInstruction:has(.levelBundle),
.WaGadgetContactProfile #idMembershipLevelContainer .typeInstruction:has(.levelRenewal),
.WaGadgetContactProfile #idMembershipLevelContainer .typeInstruction:has(.levelRecurring) { display: none !important; }
/* Price pill: "Free for 2027" while the fee is $0, the price after that */
.WaGadgetContactProfile #idMembershipLevelContainer .labelSubTitle:has(.levelPrice:empty) { display: block !important; }
.WaGadgetContactProfile #idMembershipLevelContainer .levelPrice {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 12px;
border-radius: 999px;
background: var(--pia-gold, #F5B82E);
color: var(--pia-ink, #0C1E12) !important;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 13px;
letter-spacing: .5px;
line-height: 1;
}
.WaGadgetContactProfile #idMembershipLevelContainer .levelPrice:empty::before { content: 'Free for 2027'; }
/* ============================================================
PIA - Add member to bundle (POC adds a staff member)
============================================================ */
.WaGadgetAddMemberToBundle #idCaptionGroupSummaryContainer,
.WaGadgetAddMemberToBundle #idSectionGroupSummaryContainer { display: none !important; }
.WaGadgetAddMemberToBundle #idCaptionContainer18319727,
.WaGadgetAddMemberToBundle #idCaptionContainer18319727 + .sectionOuterContainer,
.WaGadgetAddMemberToBundle #idCaptionContainer18333358,
.WaGadgetAddMemberToBundle #idCaptionContainer18333358 + .sectionOuterContainer,
.WaGadgetAddMemberToBundle #idCaptionContainer18333367,
.WaGadgetAddMemberToBundle #idCaptionContainer18333367 + .sectionOuterContainer { display: none !important; }
.WaGadgetAddMemberToBundle.pia-need-org #idCaptionContainer18319727,
.WaGadgetAddMemberToBundle.pia-need-org #idCaptionContainer18319727 + .sectionOuterContainer { display: block !important; }
.WaGadgetAddMemberToBundle #idCaptionContainer18319726 + .sectionOuterContainer .fieldContainer:not(#idContainer16014758):not(#idContainer16014759):not(#idContainer16014757):not(#idContainer18319649) { display: none !important; }
.WaGadgetAddMemberToBundle #idCaptionContainer18319728 + .sectionOuterContainer .fieldContainer:not(#idContainer16014764) { display: none !important; }
.pia-add-intro {
margin: 0 0 24px;
padding: 16px 18px;
border: 1px solid #FCE6B6;
border-radius: 12px;
background: #FEFBF2;
font-size: 14.5px;
line-height: 1.55;
color: var(--pia-body-col, #44507A);
}
.pia-add-intro strong { color: var(--pia-ink, #0C1E12); }
.pia-add-email-error {
display: block;
margin-top: 6px;
font-size: 13px;
color: #B91C1C;
}
/* Hide the Organisation details card on staff records (only the POC fills it in) */
.WaGadgetContactProfile .inner:has(> #idCaptionContainer0):not(:has(> #idCaptionGroupAccountContainer)) > #idCaptionContainer18333358,
.WaGadgetContactProfile .inner:has(> #idCaptionContainer0):not(:has(> #idCaptionGroupAccountContainer)) > #idCaptionContainer18333358 + .sectionOuterContainer { display: none !important; }
/* ---------- PIA profile: "Complete your profile" strip ---------- */
.WaGadgetContactProfile .pia-profile-strip {
grid-column: 1 / -1;
order: 9;
box-sizing: border-box;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 8px;
padding: 18px 20px;
border-radius: 12px;
background: rgba(245, 184, 46, .08);
border: 1px solid rgba(245, 184, 46, .35);
}
.WaGadgetContactProfile .pia-profile-strip * { box-sizing: border-box; }
.WaGadgetContactProfile .pia-profile-strip-text { flex: 1 1 260px; min-width: 0; }
.WaGadgetContactProfile .pia-profile-strip-label {
display: block;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
margin: 0 0 6px;
}
.WaGadgetContactProfile .pia-profile-strip-count {
display: block;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 17px;
color: #fff;
}
.WaGadgetContactProfile .pia-profile-strip-bar {
height: 6px;
max-width: 360px;
margin: 10px 0 8px;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
overflow: hidden;
}
.WaGadgetContactProfile .pia-profile-strip-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--pia-gold, #F5B82E);
}
.WaGadgetContactProfile .pia-profile-strip-note {
display: block;
font-size: 13.5px;
line-height: 1.5;
color: rgba(255, 255, 255, .7);
}
.WaGadgetContactProfile .pia-profile-strip-btn {
flex: 0 0 auto;
margin: 0;
padding: 10px 20px;
font-family: var(--pia-font-display, 'Space Grotesk', sans-serif);
font-weight: 600;
font-size: 14px;
line-height: 1.2;
border: 0;
border-radius: 8px;
background: var(--pia-gold, #F5B82E);
color: var(--pia-ink, #0C1E12);
cursor: pointer;
transition: background .2s ease;
}
.WaGadgetContactProfile .pia-profile-strip-btn:hover { background: var(--pia-gold-deep, #D99410); }
@media (max-width: 760px) {
.WaGadgetContactProfile .pia-profile-strip { padding: 16px; }
.WaGadgetContactProfile .pia-profile-strip-btn { width: 100%; }
}
/* ---------- PIA profile: staff list inside the "Your team" strip ---------- */
.WaGadgetContactProfile .pia-team-strip-list {
flex: 1 1 100%;
list-style: none !important;
margin: 4px 0 0 !important;
padding: 14px 0 0 !important;
border-top: 1px solid rgba(255, 255, 255, .1);
display: grid;
gap: 8px;
}
.WaGadgetContactProfile .pia-team-strip-list li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.WaGadgetContactProfile .pia-team-strip-list li::before,
.WaGadgetContactProfile .pia-team-strip-list li::marker { content: none; }
.WaGadgetContactProfile .pia-team-strip-list a {
color: #fff !important;
font-weight: 600;
font-size: 14.5px;
text-decoration: none !important;
}
.WaGadgetContactProfile .pia-team-strip-list a:hover { text-decoration: underline !important; }
/* ============================================================
PIA - Wild Apricot message boxes (site-wide)
Info, success, warning and error notices in PIA colours.
The membership renewal page keeps its own custom design.
============================================================ */
.WaGadget:not(.WaGadgetMembershipRenewal) .commonMessageBox .messageBox {
margin: 0 0 20px !important;
padding: 0 !important;
border: 1px solid #DFF0E6 !important;
border-left: 4px solid #1A8C6A !important;
border-radius: 10px !important;
background: #F4F9F6 !important;
box-shadow: none !important;
overflow: hidden;
}
.WaGadget:not(.WaGadgetMembershipRenewal) .commonMessageBox .messageBox .cww { display: none !important; }
.WaGadget:not(.WaGadgetMembershipRenewal) .commonMessageBox .messageBox .cww-inner {
background: none !important;
border: 0 !important;
padding: 14px 18px !important;
margin: 0 !important;
min-height: 0 !important;
}
.WaGadget:not(.WaGadgetMembershipRenewal) .commonMessageBox .messageBox .cww-co {
padding: 0 !important;
margin: 0 !important;
background: none !important;
}
.WaGadget:not(.WaGadgetMembershipRenewal) .commonMessageBox .messageBox .text {
padding: 0 !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
color: var(--pia-ink, #0C1E12) !important;
}
.WaGadget:not(.WaGadgetMembershipRenewal) .commonMessageBox .messageBox .text a {
color: var(--pia-primary, #1A8C6A) !important;
font-weight: 600;
}
/* Warning: gold */
.WaGadget:not(.WaGadgetMembershipRenewal) .commonMessageBox [class*="Warning"].messageBox {
border-color: #FCE6B6 !important;
border-left-color: #F5B82E !important;
background: #FEFBF2 !important;
}
/* Error: red */
.WaGadget:not(.WaGadgetMembershipRenewal) .commonMessageBox [class*="Error"].messageBox {
border-color: #F5C2C2 !important;
border-left-color: #B91C1C !important;
background: #FDF3F3 !important;
}
/* ============================ END ============================ */