, where a real caption
holds plain text. That structural difference is the only reliable tell. */
.WaGadgetContactProfile .captionOuterContainer:has(.fieldBody h4 > div),
.profileMainOuterContainer .captionOuterContainer:has(.fieldBody h4 > div) {
display: none;
}
/* Profile tab strip and the Edit profile button. */
.WaGadgetContactProfile ul.memberDetailsTabMenu li a { color: var(--naca-navy); }
.WaGadgetContactProfile ul.memberDetailsTabMenu li.selected span { color: var(--naca-heading); font-weight: var(--naca-weight-semi); }
.WaGadgetContactProfile input.typeButton,
.WaGadgetMemberPublicProfile input.typeButton,
.memberDirectoryDetailsContainer input.typeButton {
background: var(--naca-blue) !important;
color: var(--naca-on-navy) !important;
border: none !important;
border-radius: var(--naca-radius-sm) !important;
padding: 0.5rem 1.1rem;
font-weight: var(--naca-weight-semi);
cursor: pointer;
}
.WaGadgetContactProfile input.typeButton:hover,
.WaGadgetMemberPublicProfile input.typeButton:hover,
.memberDirectoryDetailsContainer input.typeButton:hover { background: var(--naca-navy-deep) !important; }
/* Public profile header: name, Send message button, Back link. */
.memberDirectoryDetailsHeaderContainer h2 {
font-family: var(--naca-font-head);
color: var(--naca-heading);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--naca-space-4);
margin: 0 0 var(--naca-space-4);
}
.sendMailButtonContainer { font-size: var(--naca-text-md); font-weight: var(--naca-weight-normal); }
.pageBackContainer a { color: var(--naca-navy); font-size: var(--naca-text-base); }
@media screen and (max-width: 616px) {
.WaGadgetContactProfile .fieldSubContainer.labeledTextContainer,
.WaGadgetContactProfile .fieldContainer[id^="idContainer"] > .fieldSubContainer,
.WaGadgetMemberPublicProfile .fieldSubContainer.labeledTextContainer,
.profileMainOuterContainer .fieldSubContainer.labeledTextContainer {
grid-template-columns: 1fr;
gap: 0;
margin-bottom: var(--naca-space-3);
}
.WaGadgetContactProfile .fieldSubContainer.labeledTextContainer > .fieldLabel,
.WaGadgetMemberPublicProfile .fieldSubContainer.labeledTextContainer > .fieldLabel,
.profileMainOuterContainer .fieldSubContainer.labeledTextContainer > .fieldLabel { text-align: left; }
}
/* --- Other form surfaces (profile, event registration, donations) ---------- */
.generalFieldsContainer .fieldItem { margin-bottom: 1.1rem; }
.generalFieldsContainer input[type="text"],
.generalFieldsContainer input[type="email"],
.generalFieldsContainer input[type="tel"],
.generalFieldsContainer select,
.generalFieldsContainer textarea {
border: 1px solid var(--naca-border-strong);
border-radius: var(--naca-radius-sm);
padding: 0.6rem 0.7rem;
font-family: inherit;
font-size: var(--naca-text-md);
color: var(--naca-text);
background: var(--naca-surface);
}
/* --- Events, blog and list gadgets ---------------------------------------- */
.WaGadgetEventsStateList .eventTitle a,
.WaGadgetUpcomingEvents .title,
.WaGadgetRecentBlogPosts .title {
color: var(--naca-heading);
font-weight: var(--naca-weight-semi);
}
.WaGadgetUpcomingEvents .title a,
.WaGadgetRecentBlogPosts .title a { color: var(--naca-navy); }
.WaGadgetEventsStateList .eventDate,
.WaGadgetEventsStateList .eventLocation {
color: var(--naca-muted);
font-size: var(--naca-text-base);
}
/* --- Content gadgets ------------------------------------------------------- */
.WaGadgetContent a { color: var(--naca-navy); }
.WaGadgetContent a:hover { color: var(--naca-navy-soft); }
.WaGadgetContent a.stylizedButton { color: var(--naca-on-navy); }
/* --- Embedded job board / news feed ----------------------------------------
Paste into a content gadget:
*/
.WaGadgetContent .naca-embed { margin: 0; }
/* --- Boxed gadgets (gadgetStyle001) ----------------------------------------
A gadget set to a "box with a heading" style renders a title bar:
.gadgetStyle001 > .gadgetStyleTitle > h4.gadgetTitleH4
.gadgetStyle001 > .gadgetStyleBody
The built theme colors that bar with its own accent, so this is where the
theme's blue survives on any page using boxed gadgets — Forum updates,
Articles, Roundtables, and most sidebar gadgets.
Scoped to gadgetStyle001 deliberately. gadgetStyle002 is used for banner
gadgets that carry their own background image; giving its body a surface
color would paint over the image. */
.gadgetStyle001 > .gadgetStyleTitle {
background: var(--naca-navy);
border-radius: var(--naca-radius-md) var(--naca-radius-md) 0 0;
padding: 0.55rem 0.9rem;
}
.gadgetStyle001 > .gadgetStyleTitle h4.gadgetTitleH4 {
margin: 0;
color: var(--naca-on-navy);
font-family: var(--naca-font-head);
font-size: var(--naca-text-md);
font-weight: var(--naca-weight-semi);
}
.gadgetStyle001 > .gadgetStyleBody {
background: var(--naca-surface);
border: 1px solid var(--naca-border);
border-top: none;
border-radius: 0 0 var(--naca-radius-md) var(--naca-radius-md);
padding: 0.9rem;
}
/* List gadgets that render inside those boxes. */
.WaGadgetForumUpdates ul,
.WaGadgetRecentBlogPosts ul,
.WaGadgetUpcomingEvents ul { margin: 0; padding: 0; list-style: none; }
.WaGadgetForumUpdates ul > li,
.WaGadgetRecentBlogPosts ul > li,
.WaGadgetUpcomingEvents ul > li {
padding-block: 0.4rem;
border-bottom: 1px solid var(--naca-border);
}
.WaGadgetForumUpdates ul > li.last,
.WaGadgetRecentBlogPosts ul > li.last,
.WaGadgetUpcomingEvents ul > li.last { border-bottom: none; }
.WaGadgetForumUpdates .title,
.WaGadgetRecentBlogPosts .title,
.WaGadgetUpcomingEvents .title {
color: var(--naca-text-secondary);
font-size: var(--naca-text-base);
}
.WaGadgetForumUpdates .title a,
.WaGadgetRecentBlogPosts .title a,
.WaGadgetUpcomingEvents .title a {
color: var(--naca-navy);
font-weight: var(--naca-weight-semi);
}
/* --- Headings inside editable content areas -------------------------------- */
.gadgetContentEditableArea h3,
.gadgetContentEditableArea h4 {
font-family: var(--naca-font-head);
color: var(--naca-heading);
margin: 0 0 var(--naca-space-2);
}
.gadgetContentEditableArea h4 { font-size: var(--naca-text-md); }
/* --- Social profile icons --------------------------------------------------
The theme draws these as icon glyphs; recoloring is left to the theme, but
the hover state is normalized so it does not flash the theme accent. */
.WaGadgetSocialProfile.gadgetThemeStyle ul li a { transition: opacity var(--naca-transition); }
.WaGadgetSocialProfile.gadgetThemeStyle ul li a:hover { opacity: 0.75; }
/* --- Membership wizard, fill-data step -------------------------------------
State: .WaGadgetMembershipApplicationStateFillData (step 2, after a level
is chosen). Its inputs carry .typeText rather than a type-based hook, and
the final button is .submitApplicationButton, not .nextButton — both are
named explicitly so neither falls back to the theme's own styling. */
.fieldBody { color: var(--naca-text); }
.fieldSubContainer.singleStringContainer { margin-bottom: 0.9rem; }
input.typeText,
textarea.typeText,
select.typeText {
border: 1px solid var(--naca-border-strong);
border-radius: var(--naca-radius-sm);
padding: 0.55rem 0.7rem;
font-family: inherit;
font-size: var(--naca-text-md);
color: var(--naca-text);
background: var(--naca-surface);
}
input.typeText:focus-visible,
textarea.typeText:focus-visible,
select.typeText:focus-visible {
outline: 2px solid var(--naca-navy);
outline-offset: 1px;
}
/* Prefilled / read-only fields — visibly inert rather than just greyed text. */
input.aspNetDisabled,
input.typeText[disabled],
input.typeText[readonly] {
background: var(--naca-surface-alt);
color: var(--naca-muted);
cursor: not-allowed;
}
/* Field-level validation message. */
.validationError,
span.validationError {
color: var(--naca-warn-text);
font-size: var(--naca-text-base);
font-weight: var(--naca-weight-semi);
}
/* --- Hero / banner gadgets -------------------------------------------------
A banner is a content gadget carrying an inline background-image, e.g.
The attribute selector below keys on that background-image, which is the
only reliable signal that a gadget is a hero.
Why the Home hero text was dark: its copy is wrapped in
with NO color attribute, so it inherited the
body color. The About Us hero happens to carry color="#ffffff" inline and
was fine. Rather than relying on whoever edits the page to remember, every
hero now gets light text, a legibility scrim, and a gold CTA. */
.WaGadgetContent[style*="background-image"] {
position: relative;
}
/* Scrim: keeps text readable over any photograph, light or dark. Tuned to
darken without muddying the image. */
.WaGadgetContent[style*="background-image"]::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(14, 30, 60, 0.30) 0%,
rgba(14, 30, 60, 0.55) 100%);
pointer-events: none;
}
.WaGadgetContent[style*="background-image"] > .gadgetStyleBody {
position: relative;
z-index: 1;
}
/* Light silver, with a shadow so it survives a bright patch of photo.
The `font` selector matters — Wild Apricot's editor wraps sized text in
, and without naming it the color would not reach the text. */
.WaGadgetContent[style*="background-image"] .gadgetStyleBody,
.WaGadgetContent[style*="background-image"] .gadgetStyleBody p,
.WaGadgetContent[style*="background-image"] .gadgetStyleBody h1,
.WaGadgetContent[style*="background-image"] .gadgetStyleBody h2,
.WaGadgetContent[style*="background-image"] .gadgetStyleBody h3,
.WaGadgetContent[style*="background-image"] .gadgetStyleBody strong,
.WaGadgetContent[style*="background-image"] .gadgetStyleBody font,
.WaGadgetContent[style*="background-image"] .gadgetStyleBody td {
color: var(--naca-on-hero);
text-shadow: 0 1px 3px rgba(9, 18, 36, 0.55);
}
.WaGadgetContent[style*="background-image"] .gadgetStyleBody h1,
.WaGadgetContent[style*="background-image"] .gadgetStyleBody h1.promo {
letter-spacing: 0.01em;
text-wrap: balance;
}
/* A hero CTA is the one place gold beats navy — navy on a dark photo reads
as a hole. The button keeps its own shadow rather than the text shadow. */
.WaGadgetContent[style*="background-image"] a.stylizedButton,
.WaGadgetContent[style*="background-image"] a:link.stylizedButton {
background: var(--naca-gold) !important;
color: var(--naca-on-gold) !important;
text-shadow: none;
box-shadow: 0 2px 10px rgba(9, 18, 36, 0.35);
display: inline-block;
}
.WaGadgetContent[style*="background-image"] a.stylizedButton:hover {
background: var(--naca-gold-hover) !important;
}
.WaGadgetContent[style*="background-image"] a.stylizedButton font { text-shadow: none; }
/* The editor's layout table inside a hero — strip its borders so the scrim
reads as one surface. */
.contStyleExcSimpleTable,
.contStyleExcSimpleTable td { background: transparent; border: 0; }
/* --- System message boxes (commonMessageBox) --------------------------------
Used by the disabled donation form and the no-JavaScript directory notice.
The theme draws this box with .cww / .cww1-.cww4 corner pieces, so only the
text is colored here — setting a background or border would separate the
corners from the box, the same trap as the form containers. */
.commonMessageBox .header {
color: var(--naca-heading);
font-family: var(--naca-font-head);
font-weight: var(--naca-weight-semi);
}
.commonMessageBox .text { color: var(--naca-text-secondary); }
.commonMessageBox.confirmWindowWarning .text,
.confirmWindowWarning .text { color: var(--naca-warn-text); }
/* --- System page titles ---------------------------------------------------- */
h1.pageTitle,
h1.SystemPageTitle,
h3.sectionTitle {
font-family: var(--naca-font-head);
color: var(--naca-heading);
}
h3.sectionTitle {
font-size: var(--naca-text-xl);
margin-bottom: var(--naca-space-3);
}
/* --- Events (WaGadgetEvents / WaGadgetEventsStateList) ---------------------- */
.upcomingEventsContainer,
.pastEventsContainer { color: var(--naca-text); }
.WaGadgetEvents .eventTitle a,
.pastEventsList a {
color: var(--naca-heading);
font-weight: var(--naca-weight-semi);
}
.WaGadgetEvents .eventTitle a:hover,
.pastEventsList a:hover { color: var(--naca-navy); }
.WaGadgetEvents .eventDate,
.WaGadgetEvents .eventLocation {
color: var(--naca-muted);
font-size: var(--naca-text-base);
}
table.pastEventsList { width: 100%; border-collapse: collapse; }
table.pastEventsList td {
padding: 0.45rem 0.6rem;
border-bottom: 1px solid var(--naca-border);
}
/* List / calendar switcher above the events list. */
.pageViewSwitcherContainer { font-size: var(--naca-text-base); }
a.calendarModeLink { color: var(--naca-navy); font-weight: var(--naca-weight-semi); }
a.calendarModeLink:hover { color: var(--naca-navy-soft); }
.rssFeedLabel { opacity: 0.8; }
.rssFeedLabel:hover { opacity: 1; }
/* --- Member directory (WaGadgetMemberDirectory) ----------------------------- */
.WaGadgetMemberDirectory label { color: var(--naca-muted); font-weight: var(--naca-weight-semi); }
.memberDirectorySearchArea input[type="text"] {
border: 1px solid var(--naca-border-strong);
border-radius: var(--naca-radius-sm);
padding: 0.5rem 0.7rem;
font-family: inherit;
font-size: var(--naca-text-md);
color: var(--naca-text);
background: var(--naca-surface);
}
.memberDirectorySearchArea input[type="text"]:focus-visible {
outline: 2px solid var(--naca-navy);
outline-offset: 1px;
}
.searchResult { color: var(--naca-muted); font-size: var(--naca-text-base); }
.searchResult em { color: var(--naca-text); font-style: normal; font-weight: var(--naca-weight-semi); }
.advSearchContainerLink a { color: var(--naca-navy); font-weight: var(--naca-weight-semi); }
/* Rows are injected by MemberDirectoryListRenderer after load, so these are
generic rather than row-specific. */
.memberDirectory a { color: var(--naca-navy); }
.memberDirectory table { width: 100%; border-collapse: collapse; font-size: var(--naca-text-base); }
.memberDirectory th {
text-align: left;
color: var(--naca-muted);
font-weight: var(--naca-weight-semi);
border-bottom: 1px solid var(--naca-border);
padding: 0.45rem 0.6rem;
}
.memberDirectory td { border-bottom: 1px solid var(--naca-border); padding: 0.45rem 0.6rem; }
/* --- Online store (WaGadgetOnlineStoreMiniCart / Catalog) ------------------- */
.cart-gadget a.cart-gadget_state {
color: var(--naca-navy);
font-weight: var(--naca-weight-semi);
text-decoration: none;
}
.cart-gadget a.cart-gadget_state:hover { color: var(--naca-navy-soft); }
.cart-gadget_label { font-size: var(--naca-text-base); }
.cart-gadget_quantity,
.cart-gadget_count { color: var(--naca-muted); }
.WaGadgetOnlineStoreCatalog { color: var(--naca-text); }
.WaGadgetOnlineStoreCatalog p { color: var(--naca-text-secondary); }
.WaGadgetOnlineStoreCatalog a { color: var(--naca-navy); }
/* --- Donation form (WaGadgetDonationForm) ----------------------------------- */
.WaGadgetDonationForm .publicWizardNameContainer { color: var(--naca-text); }
.WaGadgetDonationForm h3.formTitle {
font-family: var(--naca-font-head);
color: var(--naca-heading);
font-size: var(--naca-text-xl);
}
.WaGadgetDonationForm input[type="submit"] {
background: var(--naca-blue) !important;
color: var(--naca-on-navy) !important;
border: none !important;
border-radius: var(--naca-radius-sm) !important;
font-weight: var(--naca-weight-semi);
}
.WaGadgetDonationForm input[type="submit"]:hover {
background: var(--naca-navy-deep) !important;
}
/* --- Remaining layout zones -------------------------------------------------
Pages distribute gadgets across zones unevenly — Home (Demo) puts its entire
body in zoneHeader3, not zoneContent. Giving every zone the page ground
means no band is left unpainted whichever zone a page happens to use. */
.zoneHeader2,
.zoneHeader3,
.zoneHeader4,
.zoneFooter1 { background: var(--naca-bg); }
/* Slideshow gadget — the theme supplies the skin; only the corner is matched. */
.WaGadgetSlideshow .camera_wrap { border-radius: var(--naca-radius-md); overflow: hidden; }
/* Core Wild Apricot layout grids, form corner scaffolding and platform
sprites are intentionally left to the built-in theme. */
/* --- Legacy inline colors: OPTIONAL / DISABLED -----------------------------
Prefer removing old inline colors in the page editor. These overrides are
intentionally disabled to avoid changing user-selected gadget backgrounds.
Enable only a matching selector if a specific old inline color must go. */
/*
[style*="background-color:#40B2CF"] {
background-color: var(--naca-navy) !important;
}
[style*="background-color:#333333"] {
background-color: var(--naca-navy-deep) !important;
}
[style*="background-color:#E6E6E6"] {
background-color: var(--naca-tint-200) !important;
}
*/
/* --- Header block: logo, search, breadcrumbs --------------------------------
The logo and search gadgets carry their layout inline, written by the page
editor, so these few rules need !important to reach them:
logo wrapper style="text-align: Left"
logo image style="max-width:100%; height:100%"
logo body style="padding-top:10px; padding-bottom:10px"
search gadget style="margin-top:30px; margin-bottom:10px" */
/* Centred over the navigation bar. The image is centred in its own right as
well, so this holds even if the wrapper's inline alignment changes. */
.WaGadgetAccountLogo .gadgetStyleBody > div { text-align: center !important; }
.WaGadgetAccountLogo img {
display: inline-block;
height: auto !important; /* beats the inline height:100% */
width: auto;
max-height: 200px; /* the one number to tune if it wants resizing */
max-width: 100%;
}
/* Close the gap under the logo and lift the search box level with it. */
.WaGadgetAccountLogo .gadgetStyleBody {
padding-top: 6px !important;
padding-bottom: 0 !important;
}
.WaGadgetSiteSearch {
margin-top: 8px !important;
margin-bottom: 6px !important;
}
/* --- Raster icons the theme serves ------------------------------------------
The RSS and calendar-view icons are images, not CSS-coloured elements, so
they kept the theme's teal after everything else turned navy. brightness(0)
flattens the picture to solid black first; the rest rebuilds NACA navy from
there, which means it works whatever colour the source icon happens to be.
Measured against a teal sample: resolves to #213865, a distance of 8/255
from --naca-navy. */
.rssFeedLabel img,
img.calendarModeIcon,
.WaGadgetEvents .rssFeedLabel img,
.WaGadgetBlog .rssFeedLabel img {
filter: brightness(0) saturate(100%) invert(18%) sepia(35%) saturate(1400%)
hue-rotate(186deg) brightness(95%) contrast(92%);
}
/* --- Heading scale in content gadgets ---------------------------------------
The theme renders a content h1 at 46px. That is fine for a hero but far too
loud for a column heading, which is why "Upcoming events", "Recent News" and
"Social Media" were competing with the page itself.
Hero headings are unaffected: their size is written inline on a
element by the editor (60px on Home, 72px on About Us), which outranks this. */
.gadgetContentEditableArea h1 { font-size: 1.9rem; line-height: 1.2; }
.gadgetContentEditableArea h2 { font-size: 1.5rem; line-height: 1.25; }
.gadgetContentEditableArea h1.header {
font-size: 1.8rem;
line-height: 1.3;
letter-spacing: 0;
}
.gadgetContentEditableArea h1.promo {
font-size: 2rem;
line-height: 1.25;
letter-spacing: 0.06em;
}
/* --- Wild Apricot's own responsive states -----------------------------------
The theme switches layout at 960px (state1/state2) and 600px (state3), and
the menu collapses at 617px. These match those, not the component
breakpoints in section 13 — those serve the boards and the bridge, where
Wild Apricot's states do not apply. */
@media screen and (max-width: 959px) {
.WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li > .item > a { padding-inline: 0.75rem; }
}
@media screen and (max-width: 616px) {
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel {
background: var(--naca-navy);
}
.WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li > .item > a {
border-bottom: 1px solid var(--naca-navy-soft);
}
}
/* ==========================================================================
15. OPTIONAL — BRAND WEBFONTS
Uncomment both the import and the token override to match naca-usa.org
exactly. Costs one extra network request; the system stack above is
faster and already very close.
========================================================================== */
/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@300;400;500;700&display=swap');
:root {
--naca-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--naca-font-head: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
*/
/* ==========================================================================
16. NAVY CONTENT PANELS
========================================================================== */
/* Match the two NACA navy values regardless of hex-letter case. */
.WaGadgetContent[style*="#0e1e3c" i],
.WaGadgetContent[style*="#1e395e" i] {
border-left: 6px solid var(--naca-blue);
border-radius: 0 3px 3px 0;
overflow: hidden;
box-sizing: border-box;
}
.WaGadgetContent[style*="#0e1e3c" i] .gadgetStyleBody,
.WaGadgetContent[style*="#1e395e" i] .gadgetStyleBody {
padding-inline: 1.4rem;
}
/* ==========================================================================
17. COMPACT DESKTOP HEADER
Final desktop layout: 96px band, 68px nav below the sign-in links.
Menu and account controls occupy separate rows to prevent collisions.
========================================================================== */
@media screen and (min-width: 960px) {
#idHeaderContentHolder {
position: relative !important;
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
padding: 0 !important;
margin: 0 !important;
background: var(--naca-navy-deep) !important;
overflow: visible !important;
}
/* Logo anchored left. */
#idHeaderContentHolder .WaGadgetAccountLogo {
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 190px !important;
margin: 0 !important;
padding: 0 !important;
z-index: 10;
}
#idHeaderContentHolder .WaGadgetAccountLogo .gadgetStyleBody {
padding: 0 !important;
margin: 0 !important;
}
#idHeaderContentHolder .WaGadgetAccountLogo .gadgetStyleBody > div {
text-align: left !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
#idHeaderContentHolder .WaGadgetAccountLogo img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 180px !important;
max-height: 68px !important;
margin: 0 !important;
}
/* Navigation is below the 8px-high account row. */
#idHeaderContentHolder .WaGadgetMenuHorizontal {
position: absolute !important;
left: 240px !important;
right: 20px !important;
top: 28px !important;
height: 68px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
z-index: 9;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal .menuBackground,
#idHeaderContentHolder .WaGadgetMenuHorizontal .menuInner {
height: 68px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel {
display: flex !important;
align-items: center !important;
height: 68px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li,
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li > .item {
display: flex !important;
align-items: center !important;
height: 68px !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li > .item > a {
display: flex !important;
align-items: center !important;
height: 68px !important;
box-sizing: border-box !important;
padding: 0 11px !important;
background: transparent !important;
color: var(--naca-on-navy) !important;
font-size: 14px !important;
font-weight: 500 !important;
white-space: nowrap !important;
box-shadow: none !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li > .item > a:hover {
background: transparent !important;
color: var(--naca-blue) !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a {
background: transparent !important;
color: var(--naca-on-navy) !important;
box-shadow: inset 0 -3px 0 var(--naca-blue) !important;
}
/* Signed-in users have several links; keep them on their own row. */
#idHeaderContentHolder .WaGadgetLoginButton {
position: absolute !important;
top: 8px !important;
right: 20px !important;
transform: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
z-index: 11;
}
#idHeaderContentHolder .WaGadgetLoginButton a,
#idHeaderContentHolder .loginLink {
display: inline-block !important;
padding: 0 !important;
background: transparent !important;
color: var(--naca-tint-400) !important;
border-radius: 0 !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-decoration: none !important;
}
#idHeaderContentHolder .WaGadgetLoginButton a:hover,
#idHeaderContentHolder .loginLink:hover {
background: transparent !important;
color: var(--naca-on-navy) !important;
}
#idHeaderContentHolder .WaGadgetLoginButton .loginBoxProfileLink,
#idHeaderContentHolder .WaGadgetLoginButton a.loginBoxChangePassword,
#idHeaderContentHolder .WaGadgetLoginButton a.loginBoxLogout {
margin: 0 0 0 14px !important;
}
#idHeaderContentHolder .WaGadgetSiteSearch,
.WaGadgetBreadcrumbs {
display: none !important;
}
/* White dropdown cards on desktop. */
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.secondLevel {
background: var(--naca-surface) !important;
border: 1px solid var(--naca-border) !important;
border-radius: var(--naca-radius-sm) !important;
box-shadow: 0 10px 25px rgba(14, 30, 60, 0.18) !important;
padding: 6px 0 !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.secondLevel > li > .item > a {
background: var(--naca-surface) !important;
color: var(--naca-heading) !important;
padding: 10px 16px !important;
font-size: 14px !important;
height: auto !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.secondLevel > li > .item > a:hover {
background: var(--naca-tint-200) !important;
color: var(--naca-navy-deep) !important;
}
/* Suppress Wild Apricot's oversized dropdown marks. */
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir,
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir > .item,
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir > .item > a {
background-image: none !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir > .item {
background: none !important;
}
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir::before,
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir::after,
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir > .item::before,
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir > .item::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Small grey chevron on items with submenus. */
#idHeaderContentHolder .WaGadgetMenuHorizontal.menuStyle001 ul.firstLevel > li.dir > .item > a::after {
content: "" !important;
display: inline-block !important;
position: static !important;
width: 5px !important;
height: 5px !important;
margin-left: 7px !important;
margin-bottom: 3px !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-right: 1.5px solid #9ca3af !important;
border-bottom: 1.5px solid #9ca3af !important;
box-shadow: none !important;
transform: rotate(45deg) !important;
}
}
/* ==========================================================================
18. RESOURCE LIBRARY LIST
========================================================================== */
.naca-resource-list,
.naca-resource-list ul {
margin: 0 !important;
}
.naca-resource-list ul { padding: 0 !important; }
.naca-resource-list li {
position: relative;
list-style: none !important;
padding: 16px 55px 16px 14px !important;
margin: 0 !important;
min-height: 44px;
border-bottom: 1px solid #dce5ef;
line-height: 1.45;
box-sizing: border-box;
transition: background var(--naca-transition);
}
.naca-resource-list li::before,
.naca-resource-list li::after {
display: none !important;
content: none !important;
}
.naca-resource-list li:last-child { border-bottom: none; }
.naca-resource-list li:hover { background: #f8fafc; }
.naca-resource-list li a {
color: var(--naca-navy-deep) !important;
font-weight: 700 !important;
text-decoration: none !important;
border-bottom: none !important;
transition: color var(--naca-transition);
}
.naca-resource-list li:hover a { color: var(--naca-blue) !important; }
/* Keep the right arrow attached to its link, so the arrow is clickable. */
.naca-resource-list li a::after {
content: "›";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-52%);
width: 36px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--naca-blue);
font-size: 30px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: color var(--naca-transition), transform var(--naca-transition);
}
.naca-resource-list li:hover a::after {
color: var(--naca-navy-deep);
transform: translate(3px, -52%);
}
/* ==========================================================================
19. DESKTOP DROPDOWNS — KEEP OPEN ON POINTER AND KEYBOARD FOCUS
Applies only to the existing desktop menu; leaves mobile behavior intact.
========================================================================== */
@media screen and (min-width: 960px) {
/* Dropdown panels must be able to extend below the fixed header. */
#idHeaderContentHolder,
#idHeaderContentHolder .WaGadgetMenuHorizontal,
#idHeaderContentHolder .WaGadgetMenuHorizontal .menuBackground,
#idHeaderContentHolder .WaGadgetMenuHorizontal .menuInner,
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel,
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.secondLevel {
overflow: visible !important;
}
[class*="zoneHeader"]:has(#idHeaderContentHolder) {
position: relative;
z-index: 1000;
}
#idHeaderContentHolder { z-index: 1000 !important; }
#idHeaderContentHolder .WaGadgetMenuHorizontal { z-index: 20 !important; }
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li,
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li > .item {
position: relative !important;
}
/* Position submenus flush with their own top-level item, with no gap. */
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li:hover ul.secondLevel,
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.firstLevel > li:focus-within ul.secondLevel {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
margin-top: 0 !important;
z-index: 1001 !important;
}
/* The 12px transparent bridge prevents cursor loss at menu boundaries. */
#idHeaderContentHolder .WaGadgetMenuHorizontal ul.secondLevel::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
background: transparent;
}
}
/* ==========================================================================
20. EDITOR BODY TEXT
The page editor emits .
Restore a legible grey and 15px body size without changing site chrome.
========================================================================== */
:root {
--naca-wa-body-color: var(--naca-text-secondary);
--naca-wa-body-size: 15px;
}
.gadgetContentEditableArea font[color="#808080" i] {
color: var(--naca-wa-body-color);
font-size: var(--naca-wa-body-size) !important;
}
/* ==========================================================================
21. COMPONENT BUTTON CASCADE
Scoped specificity beats .naca-scope a and retains WCAG text contrast.
========================================================================== */
.naca-scope .naca-button {
color: var(--naca-navy-deep);
text-decoration: none;
}
.naca-scope .naca-button:hover {
color: var(--naca-on-navy);
text-decoration: none;
}
.naca-scope .naca-button-primary { color: var(--naca-on-gold); }
.naca-scope .naca-button-primary:hover {
background: var(--naca-gold-hover);
color: var(--naca-on-gold);
}
.naca-scope .naca-button-secondary,
.naca-scope .naca-button-secondary:hover { color: var(--naca-navy); }
/* ==========================================================================
22. EVENTS AND WEBINARS
One authoritative set of rules for full graphics, event spacing, titles,
registration buttons, and decorative-arrow removal.
========================================================================== */
/* Allow full-size graphics and expanded descriptions. */
.WaGadgetEvents .boxBodyContainer,
.WaGadgetEvents .boxBodyContent,
.WaGadgetEvents .eventDetails,
.WaGadgetEvents .eventDescription,
.WaGadgetEvents .gadgetEventEditableArea,
.WaGadgetEvents .boxBodyContentContainer.fixedHeight,
.WaGadgetEvents .boxBodyContentContainer.fixedHeight .inner.gadgetEventEditableArea {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.WaGadgetEvents .boxBodyContentContainer.fixedHeight { min-height: 0 !important; }
.WaGadgetEvents img {
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
.WaGadgetEvents .boxBodyContainer img,
.WaGadgetEvents .gadgetEventEditableArea img {
max-width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
}
.WaGadgetEvents .gadgetEventEditableArea img { display: block !important; }
/* This template uses event lists, not the calendar/list switcher. */
.WaGadgetEvents .pageViewSwitcher,
.WaGadgetEvents .switchToCalendarView,
.WaGadgetEvents .viewSwitcher,
.WaGadgetEvents .calendarViewSwitcher,
.WaGadgetEvents .pageViewSwitcherContainer,
.WaGadgetEvents .calendarViewSwitch { display: none !important; }
.WaGadgetEvents .eventTitle a {
color: #0e1f3f !important;
text-decoration: none !important;
}
/* Registration controls, including WA's alternate button classes.
Legacy links use the theme's borderless, narrower style. */
.WaGadgetEvents a.button {
border: none !important;
padding: 12px 24px !important;
}
.WaGadgetEvents a:where(.button, .buttonStyle),
.WaGadgetEvents input[type="submit"],
.WaGadgetEvents input[type="button"],
.WaGadgetEvents .button,
.WaGadgetEvents .registrationButton a,
.WaGadgetEvents .registrationButton input {
display: inline-block !important;
background: var(--naca-blue) !important;
color: var(--naca-on-navy) !important;
border: 1px solid var(--naca-blue) !important;
border-radius: var(--naca-radius-sm) !important;
padding: 12px 26px !important;
font-size: 15px !important;
font-weight: 600 !important;
text-decoration: none !important;
box-shadow: none !important;
cursor: pointer !important;
}
.WaGadgetEvents a:where(.button, .buttonStyle):hover,
.WaGadgetEvents input[type="submit"]:hover,
.WaGadgetEvents input[type="button"]:hover,
.WaGadgetEvents .button:hover,
.WaGadgetEvents .registrationButton a:hover {
background: #0e1f3f !important;
border-color: #0e1f3f !important;
color: var(--naca-on-navy) !important;
}
.WaGadgetEvents h4.boxHeaderTitle a.eventDetailsLink {
display: inline-block !important;
color: #0e1f3f !important;
font-weight: 700 !important;
text-decoration: none !important;
}
/* Condense blank space around the event gadget and each listing. */
.WaGadgetEvents,
.WaGadgetEvents .boxOuterContainer,
.WaGadgetEvents .boxHeaderOuterContainer,
.WaGadgetEvents .boxHeaderContainer,
.WaGadgetEvents h4.boxHeaderTitle,
.WaGadgetEvents .boxBodyOuterContainer,
.WaGadgetEvents .boxBodyContainer,
.WaGadgetEvents .gadgetStyleBody,
.WaGadgetEvents .gadgetStyleBodyContainer {
margin-top: 0 !important;
padding-top: 0 !important;
}
.WaGadgetEvents .boxOuterContainer { margin-bottom: 20px !important; }
.WaGadgetEvents h4.boxHeaderTitle { margin-bottom: 12px !important; }
/* Hide Show Details links in the event-card footer. */
.WaGadgetEvents .boxFooterOuterContainer { display: none !important; }
.WaGadgetEvents .eventInfoStartDate,
.WaGadgetEvents .eventInfoStartTime,
.WaGadgetEvents .eventInfoBoxValue,
.WaGadgetEvents .boxInfoContainer strong,
.WaGadgetEvents .boxInfoContainer .eventInfoBoxValue * {
font-style: normal !important;
}
/* Remove title and back-link arrows from event and registration pages. */
.WaGadgetEvents .eventTitle .arrow,
.WaGadgetEvents .eventTitle .eventArrow,
.WaGadgetEvents .eventTitle a::after,
.WaGadgetEvents .boxHeaderTitle a::before,
.WaGadgetEvents .boxHeaderTitle a::after,
.WaGadgetEventsStateRegistration .boxHeaderTitle a::before,
.WaGadgetEventsStateRegistration .boxHeaderTitle a::after,
.WaGadgetEventsState .boxHeaderTitle a::before,
.WaGadgetEventsState .boxHeaderTitle a::after,
.WaGadgetEvents .pageBackContainer a::before,
.WaGadgetEvents .pageBackContainer a::after,
.WaGadgetEvents .backLink a::before,
.WaGadgetEvents .backLink a::after,
.publicWizardNameContainer h1.pageTitle a::before,
.publicWizardNameContainer h1.pageTitle a::after {
content: none !important;
display: none !important;
}
.WaGadgetEvents .boxHeaderTitle,
.WaGadgetEventsStateRegistration .boxHeaderTitle,
.WaGadgetEventsState .boxHeaderTitle,
.WaGadgetEvents .boxHeaderTitle a,
.WaGadgetEventsStateRegistration .boxHeaderTitle a,
.WaGadgetEventsState .boxHeaderTitle a {
background-image: none !important;
}
.WaGadgetEvents .boxHeaderTitle a,
.WaGadgetEventsStateRegistration .boxHeaderTitle a,
.WaGadgetEventsState .boxHeaderTitle a { padding-right: 0 !important; }
.WaGadgetEvents .boxHeaderTitle a.eventDetailsLink { background: none !important; }
.WaGadgetEvents .pageBackContainer a,
.WaGadgetEvents .backLink a {
background-image: none !important;
padding-left: 0 !important;
}
.publicWizardNameContainer h1.pageTitle a {
background: none !important;
padding-right: 0 !important;
color: #333333 !important;
text-decoration: none !important;
}
body.webinars .WaGadgetContent h2,
body.webinars .WaGadgetContent h3,
body.webinars .WaGadgetContent h4 { margin-top: 0 !important; }
/* ==========================================================================
23. MEMBERSHIP LEVEL CARDS
Matches the Zenler pricing panels: a navy panel with the description on
the left, a white price card on the right finished with a gold button,
and a thin gold rule between levels.
Wild Apricot builds each level as
.fieldItem > .typeRadioContainer (the radio) + label.levelProperties
and the label holds its lines in a fixed order:
1 name and price 2 subscription period
3 renewal 4 description
Those positions are the hooks. The radio button is hidden from view but
stays on the page, so clicking anywhere on a panel still selects it, and
keyboard users can still tab to the list and use the arrow keys.
========================================================================== */
/* --- The navy panel ------------------------------------------------------- */
#idMembershipLevelRadioGroupContainer .fieldItem {
container: naca-level / inline-size;
position: relative;
display: block !important;
background: var(--naca-navy-deep) !important;
border: 0 !important;
border-radius: var(--naca-radius-xs) !important;
padding: 28px 32px !important;
margin: 0 0 50px !important;
color: var(--naca-on-navy);
transition: box-shadow var(--naca-transition);
}
#idMembershipLevelRadioGroupContainer .fieldItem:last-child { margin-bottom: 24px !important; }
#idMembershipLevelRadioGroupContainer .fieldItem:hover {
box-shadow: 0 6px 18px rgba(14, 30, 60, 0.25);
}
/* Chosen level: gold ring round the panel. */
#idMembershipLevelRadioGroupContainer .fieldItem:has(input[type="radio"]:checked) {
box-shadow: 0 0 0 3px var(--naca-gold);
}
/* Keyboard focus. */
#idMembershipLevelRadioGroupContainer .fieldItem:has(input[type="radio"]:focus-visible) {
outline: 3px solid var(--naca-blue);
outline-offset: 4px;
}
/* Thin gold rule between panels, as on the Zenler page. */
#idMembershipLevelRadioGroupContainer .fieldItem + .fieldItem::before {
content: "";
position: absolute;
left: 16px;
right: 16px;
top: -26px;
height: 2px;
background: var(--naca-gold);
}
/* Radio: out of sight, still in the page. */
#idMembershipLevelRadioGroupContainer .typeRadioContainer {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0 !important;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --- Two-column layout: description left, white card right -------------- */
#idMembershipLevelRadioGroupContainer label.levelProperties {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 270px;
grid-template-rows: auto auto auto 1fr auto; /* name, period, renewal, spacer, button */
column-gap: 36px;
width: 100%;
margin: 0;
cursor: pointer;
color: var(--naca-on-navy);
font-size: 15px;
font-weight: var(--naca-weight-normal);
}
/* The white card itself, drawn behind the right-hand column. */
#idMembershipLevelRadioGroupContainer label.levelProperties::before {
content: "";
grid-column: 2;
grid-row: 1 / 6;
background: var(--naca-surface);
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
/* Lines 1-3 sit inside the card, centred. */
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(-n+3) {
grid-column: 2;
display: block;
padding: 0 20px;
text-align: center;
}
/* Line 1: level name over a large blue price. font-size:0 hides the bare
" - " Wild Apricot puts between the two; each part gets its size back. */
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(1) {
grid-row: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding-top: 26px;
margin-bottom: 12px;
font-size: 0 !important;
line-height: 1.15;
}
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(1) > * {
font-family: var(--naca-font-head);
font-size: 19px !important;
font-weight: var(--naca-weight-bold) !important;
color: var(--naca-heading) !important;
text-wrap: balance;
}
/* The price. Wild Apricot writes it as - $270.00 (USD)
with the dash INSIDE the price, so it cannot be hidden on its own. Instead
the line is pulled half a letter-width to the left and the overflow is
cut off, which trims the dash and nothing else.
Why 0.5em: measured across Segoe UI, Arial, Helvetica, the Mac system font
and Roboto, the dash ends by 0.38em and the "$" never starts before
0.58em, so 0.5em removes the dash in every one of them without touching
the dollar sign. */
#idMembershipLevelRadioGroupContainer label.levelProperties .levelPrice {
display: inline-block;
overflow: hidden;
white-space: nowrap;
vertical-align: top;
text-indent: -0.5em;
font-family: var(--naca-font-head);
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--naca-blue) !important;
}
/* A free level gets an empty price; show "Free" in its place. */
#idMembershipLevelRadioGroupContainer label.levelProperties .levelPrice:empty { text-indent: 0; }
#idMembershipLevelRadioGroupContainer label.levelProperties .levelPrice:empty::before { content: "Free"; }
/* Lines 2-3: subscription period and renewal, small grey. */
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(2),
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(3) {
font-size: 13px;
line-height: 1.5;
color: var(--naca-muted) !important;
}
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(2) { grid-row: 2; }
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(3) { grid-row: 3; }
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(2) *,
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(3) * { color: inherit !important; }
/* Annual-savings note in the open space under "Renew manually",
shown on Professional Membership (Annual) only.
The note is tied to the Annual level by its Wild Apricot level ID,
1832417 (read from the live join page; Monthly is 1830354, Affiliate
1829996). A level keeps its ID when renamed, repriced or reordered.
If the Annual level is ever deleted and recreated, it gets a new ID
and the note will not appear until 1832417 is updated in BOTH rules
below.
Line 3 is stretched into the card's spare row and the note is centred in
whatever room is left. To change the wording, edit the content line. */
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(3) {
grid-row: 3 / 5;
}
#idMembershipLevelRadioGroupContainer .fieldItem:has(input[levelid="1832417"]) label.levelProperties > :nth-child(3) {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
#idMembershipLevelRadioGroupContainer .fieldItem:has(input[levelid="1832417"]) label.levelProperties > :nth-child(3)::after {
content: "Save 10% with an annual subscription";
margin: auto 0;
padding: 6px 12px;
background: var(--naca-navy);
border: 1px solid var(--naca-gold);
border-radius: var(--naca-radius-md);
color: var(--naca-blue-light) !important;
text-wrap: balance;
font-size: 13px;
font-weight: var(--naca-weight-semi);
line-height: 1.35;
}
/* Line 4 on: the description, down the left of the panel. */
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(n+4) {
grid-column: 1;
grid-row: 1 / 6;
align-self: start;
font-size: 15px;
line-height: 1.6;
color: #e6ebf3 !important;
}
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(n+4) * { color: inherit !important; }
/* Gold button at the foot of the card. It is part of the label, so a click
on it selects the level just like a click anywhere else on the panel. */
#idMembershipLevelRadioGroupContainer label.levelProperties::after {
content: "Select";
grid-column: 2;
grid-row: 5;
margin: 16px 20px 22px;
padding: 11px 16px;
background: var(--naca-gold);
color: var(--naca-on-gold);
border-radius: 3px;
font-size: 14px;
font-weight: var(--naca-weight-semi);
letter-spacing: 0.02em;
text-align: center;
transition: background var(--naca-transition);
}
#idMembershipLevelRadioGroupContainer .fieldItem:hover label.levelProperties::after {
background: var(--naca-gold-hover);
}
#idMembershipLevelRadioGroupContainer .fieldItem:has(input[type="radio"]:checked) label.levelProperties::after {
content: "\2713 Selected";
background: var(--naca-navy);
color: var(--naca-on-navy);
}
/* --- Narrow panels: card on top, description below ----------------------
Keyed to the panel's own width, not the screen's, so it stacks correctly
whatever column the gadget is placed in. */
@container naca-level (max-width: 620px) {
#idMembershipLevelRadioGroupContainer label.levelProperties {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto auto; /* name, period, renewal, button, description */
}
#idMembershipLevelRadioGroupContainer label.levelProperties::before { grid-column: 1; grid-row: 1 / 5; }
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(-n+3) { grid-column: 1; }
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(3) { grid-row: 3; }
#idMembershipLevelRadioGroupContainer label.levelProperties::after { grid-column: 1; grid-row: 4; }
#idMembershipLevelRadioGroupContainer label.levelProperties > :nth-child(n+4) {
grid-column: 1;
grid-row: 5;
margin-top: 20px;
}
}
@media screen and (max-width: 616px) {
#idMembershipLevelRadioGroupContainer .fieldItem { padding: 20px !important; }
}
/* Prices displayed on later registration steps share the blue accent. */
.WaGadgetMembershipApplication .membershipLevelPrice,
.WaGadgetMembershipApplication .levelPrice,
.WaGadgetMembershipApplication .membershipFee,
.WaGadgetMembershipApplication .levelInfo .price {
color: var(--naca-blue) !important;
}
/* Ensure the link box stays put around the header nav logo */
/* ==========================================================================
24. HEADER LOGO LINK
The logo is wrapped in by the Global JavaScript. The link
must wrap the image exactly, and the logo must sit above the menu layer
that section 19 raises to z-index 20.
========================================================================== */
.WaGadgetAccountLogo a {
display: inline-block;
line-height: 0;
vertical-align: top;
}
.WaGadgetAccountLogo a img { display: block; }
@media screen and (min-width: 960px) {
#idHeaderContentHolder .WaGadgetAccountLogo {
z-index: 30 !important;
}
#idHeaderContentHolder .WaGadgetAccountLogo a {
display: block !important;
width: fit-content !important;
line-height: 0 !important;
}
}