/* ==================================================================== BEHIND CLOSED DOORS — Site-wide design system override ==================================================================== Version 5 · Wild Apricot "Whiteboard / Maya Blue" theme Rebuilt from the real page source — selectors verified. v5: Events images get rounded corners + hairline; hover lift now applies ONLY to linked images site-wide; Events page blue links + title hovers pulled to brand orange. HOW TO USE ---------- Paste this whole file into Wild Apricot's site-wide Custom CSS, or apply to your TEST PAGE first. It is additive (appearance only) and reverts completely if removed. Theme files are untouched. SECTIONS -------- 1. Web fonts 8. Form fields 2. Design tokens 9. Tables 3. Background & body 10. Header & logo area 4. Headings 11. Content panels & breadcrumbs 5. Links 12. Images (rounded corners) 6. Navigation bar 13. Hardcoded overrides 7. Buttons 14. Leftover Maya-Blue accents WHAT CSS CANNOT CHANGE (these are images, not text) --------------------------------------------------- The "Member Portal" header, the "Go to Onboarding >" link, and the page banner images are PNG files. Their text is baked into the image and cannot be restyled with CSS — they would need re-exporting. This override styles everything that is genuine HTML. ==================================================================== */ /* ==================================================================== 1. WEB FONTS — Marcellus headings, Open Sans body ==================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* ==================================================================== 2. DESIGN TOKENS — every colour defined once ==================================================================== */ :root { --bcd-orange: #F76E11; --bcd-orange-dark: #CF5705; --bcd-orange-soft: #FFF1E6; --bcd-ink: #211D18; --bcd-muted: #736C63; --bcd-line: #E8E2D8; --bcd-paper: #FAF7F1; --bcd-card: #FFFFFF; --bcd-serif: 'Marcellus', 'Cormorant Garamond', 'Georgia', serif; --bcd-sans: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; } /* ==================================================================== 3. PAGE BACKGROUND & BODY TEXT (Footer zones are deliberately left out — the default theme footer works correctly and this override does not touch it.) ==================================================================== */ body, .mLayout, .zoneHeader1, .zoneHeader2, .zoneHeader3, .zoneHeader4, .zoneContent { background-color: var(--bcd-paper) !important; } body, .gadgetStyleBody, .gadgetContentEditableArea { font-family: var(--bcd-sans) !important; color: var(--bcd-ink); } /* ==================================================================== 4. HEADINGS ==================================================================== */ h1, h2, h3, h4, h5, h6, .gadgetContentEditableArea h1, .gadgetContentEditableArea h2, .gadgetContentEditableArea h3, .gadgetContentEditableArea h4 { font-family: var(--bcd-serif) !important; color: var(--bcd-ink) !important; font-weight: 400; line-height: 1.18; } /* ==================================================================== 5. LINKS — unify decorative links to brand orange ==================================================================== */ .gadgetContentEditableArea a, .gadgetContentEditableArea a:link, .gadgetContentEditableArea a:visited { color: var(--bcd-orange) !important; text-decoration: none; transition: color 0.15s ease; } .gadgetContentEditableArea a:hover { color: var(--bcd-orange-dark) !important; text-decoration: underline; } /* ==================================================================== 6. NAVIGATION BAR — charcoal nav (verified selectors) -------------------------------------------------------------------- Structure (from page source): .WaGadgetMenuHorizontal .menuBackground <- the wide strip; THIS held the coral .menuInner ul.firstLevel > li > .item > a > span <- link text in a SPAN ==================================================================== */ /* (a) the wide background strip — fixes the coral showing at the edges */ .WaGadgetMenuHorizontal .menuBackground { background-color: var(--bcd-ink) !important; background-image: none !important; } /* (b) the inner menu area */ .WaGadgetMenuHorizontal .menuInner, .WaGadgetMenuHorizontal ul.firstLevel, .WaGadgetMenuHorizontal ul.firstLevel li, .WaGadgetMenuHorizontal .item { background-color: transparent !important; background-image: none !important; } /* (c) the link AND its inner — fixes the invisible text */ .WaGadgetMenuHorizontal ul.firstLevel li .item a, .WaGadgetMenuHorizontal ul.firstLevel li .item a span { color: #EDE9E2 !important; font-family: var(--bcd-sans) !important; font-weight: 600 !important; } /* (d) hover + current page (the source marks the active li with .sel) */ .WaGadgetMenuHorizontal ul.firstLevel li .item a:hover span, .WaGadgetMenuHorizontal ul.firstLevel li.sel .item a span { color: var(--bcd-orange) !important; } .WaGadgetMenuHorizontal ul.firstLevel li .item a:hover, .WaGadgetMenuHorizontal ul.firstLevel li.sel .item a { background-color: rgba(255,255,255,0.06) !important; } /* (e) dropdown sub-menus (.secondLevel) and the mobile menu button */ .WaGadgetMenuHorizontal ul.secondLevel, .WaGadgetMenuHorizontal .phantom ul { background-color: var(--bcd-ink) !important; } .WaGadgetMenuHorizontal .menuButton { background-color: var(--bcd-ink) !important; } /* IF THE NAV STILL SHOWS CORAL: the colour may be set in the theme's admin colour settings. In that case change the menu background there instead — CSS above will then simply reinforce it harmlessly. */ /* ==================================================================== 7. BUTTONS — pill-shaped brand orange Covers Wild Apricot's standard buttons (Register, submit, etc.) ==================================================================== */ input.button, button.button, a.button, .InputButton, .functionalButton, a.functionalButton, input[type="submit"], input[type="button"], .registrationFormButton, .eventRegistrationButton { background-color: var(--bcd-orange) !important; background-image: none !important; border: none !important; color: #FFFFFF !important; font-family: var(--bcd-sans) !important; font-weight: 700 !important; border-radius: 999px !important; padding: 9px 22px !important; cursor: pointer; transition: background-color 0.15s ease; } input.button:hover, button.button:hover, a.button:hover, .InputButton:hover, .functionalButton:hover, a.functionalButton:hover, input[type="submit"]:hover, input[type="button"]:hover { background-color: var(--bcd-orange-dark) !important; color: #FFFFFF !important; } /* ==================================================================== 8. FORM FIELDS — including the header search box The header search input is .searchBoxField (seen in source). ==================================================================== */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select, .searchBoxField { font-family: var(--bcd-sans) !important; color: var(--bcd-ink) !important; background-color: var(--bcd-card) !important; border: 1.5px solid var(--bcd-line) !important; border-radius: 8px !important; padding: 8px 11px !important; box-shadow: none !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus, .searchBoxField:focus { border-color: var(--bcd-orange) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(247,110,17,0.13) !important; } /* ==================================================================== 9. TABLES (Member Directory, Events lists, etc.) ==================================================================== */ .WaGadget table th { background-color: var(--bcd-orange-soft) !important; color: var(--bcd-ink) !important; font-weight: 700; border-bottom: 2px solid var(--bcd-orange) !important; padding: 10px 12px !important; } .WaGadget table td { border-bottom: 1px solid var(--bcd-line) !important; padding: 9px 12px !important; } /* ==================================================================== 10. HEADER & LOGO AREA The header strip background and the account links ("Stephanie Johnson", "Change password", "Log out") which ARE real HTML links. ==================================================================== */ .WaPlaceHolderHeader, .WaPlaceHolderHeader1 { background-color: var(--bcd-paper) !important; } /* account links in the header — verified classes from source */ .WaGadgetLoginButton .loginBoxProfileLink a, .WaGadgetLoginButton a.loginBoxChangePassword, .WaGadgetLoginButton a.loginBoxLogout { color: var(--bcd-orange) !important; font-family: var(--bcd-sans) !important; } .WaGadgetLoginButton .loginBoxProfileLink a:hover, .WaGadgetLoginButton a.loginBoxChangePassword:hover, .WaGadgetLoginButton a.loginBoxLogout:hover { color: var(--bcd-orange-dark) !important; } /* ==================================================================== 10b. FOOTER -------------------------------------------------------------------- Intentionally left UNSTYLED. The default theme footer already works correctly, so this override does not touch the footer band at all. (An earlier version coloured it and caused edge problems — removed.) ==================================================================== */ /* (no footer rules — default theme footer is left as-is) */ /* ==================================================================== 10c. SOCIAL ICONS — recolour to brand orange -------------------------------------------------------------------- The footer social icons (.Facebook, .X, .LinkedIn, .Instagram inside WaGadgetSocialProfile) are background-IMAGE based, so a plain background-color does not recolour them. Instead we use a CSS filter that shifts their teal hue to brand orange. The numbers below are tuned to land teal on #F76E11; if it overshoots we can fine-tune. ==================================================================== */ .WaGadgetSocialProfile ul li a { filter: grayscale(100%) sepia(100%) saturate(420%) hue-rotate(335deg) brightness(102%); transition: filter 0.15s ease, transform 0.15s ease; } .WaGadgetSocialProfile ul li a:hover { filter: grayscale(100%) sepia(100%) saturate(520%) hue-rotate(332deg) brightness(88%); transform: translateY(-1px); } /* ==================================================================== 11. CONTENT PANELS & BREADCRUMBS Breadcrumbs in source: .WaGadgetBreadcrumbs > .gadgetStyleBody > ul ==================================================================== */ .WaGadgetBreadcrumbs ul li { font-family: var(--bcd-sans) !important; color: var(--bcd-muted) !important; } .WaGadgetBreadcrumbs ul li a { color: var(--bcd-orange) !important; } .WaGadgetBreadcrumbs ul li a:hover { color: var(--bcd-orange-dark) !important; } /* ==================================================================== 12. IMAGES — rounded corners + hover lift -------------------------------------------------------------------- Rounded corners + hairline apply to images in BOTH content areas: .gadgetContentEditableArea — normal page content .gadgetEventEditableArea — Wild Apricot Events listings (v4 missed the Events images because they use the second class.) THE HOVER LIFT applies ONLY to images wrapped in a link, so the lift becomes a genuine "this is clickable" signal. Static images keep the rounded corners and hairline but stay still on hover. ==================================================================== */ /* rounded corners + resting hairline — all content + event images */ .gadgetContentEditableArea img, .gadgetEventEditableArea img { border-radius: 12px; border: 1px solid var(--bcd-line); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } /* hover lift — ONLY images inside a link (a > img). This is the Partnership-Offers effect: gentle rise, soft warm shadow, orange-tinted hairline. Static images are not matched. */ .gadgetContentEditableArea a:hover img, .gadgetEventEditableArea a:hover img { transform: translateY(-4px); box-shadow: 0 2px 8px rgba(33,29,24,0.08), 0 18px 40px rgba(247,110,17,0.16); border-color: rgba(247,110,17,0.40); } /* logos / wordmarks — keep square, no hairline (they sit in content areas too, so exclude them explicitly) */ .gadgetContentEditableArea img[src*="Logo"], .gadgetContentEditableArea img[src*="Header.png"] { border-radius: 0; border: none; } /* the tiny base64 dashed-divider images in Events content are not photos — keep them borderless so they don't get a hairline box */ .gadgetEventEditableArea img.WaContentDivider { border: none; border-radius: 0; } /* ==================================================================== 13. HARDCODED OVERRIDES -------------------------------------------------------------------- Your content was typed with inline tags, which override a normal font rule. These rules force the brand fonts back. sizes are left alone so your layout spacing is unchanged. ==================================================================== */ .gadgetContentEditableArea font, .gadgetEventEditableArea font { font-family: var(--bcd-sans) !important; } /* content sub-headings were often in an orange at 20px — keep them orange but give them the serif for consistency */ .gadgetContentEditableArea font[style*="20px"] strong, .gadgetContentEditableArea strong[style*="20px"] { font-family: var(--bcd-serif) !important; } /* ==================================================================== 14. LEFTOVER MAYA-BLUE ACCENTS Pull the theme's old blue/teal accents to brand orange. Does NOT touch .noticeBox system messages — error/warning/success boxes keep their meaningful red/amber/green. -------------------------------------------------------------------- v5 adds the Events page blue links, verified from the page source: .eventDetailsLink / .footerEventDetailsLink — event title + "Show details" links (these were going blue on hover) .calendarModeLink — "Switch to Calendar View" .rssFeedLabel — the RSS feed link .eventInfoBoxRegisterLink — the "Be the first" registered link ==================================================================== */ .WaGadgetSiteSearch a, .WaGadgetEventsCalendar a, .WaGadgetUpcomingEvents a { color: var(--bcd-orange) !important; } /* Events listing links — resting state orange */ .WaGadgetEvents a.eventDetailsLink, .WaGadgetEvents a.footerEventDetailsLink, .WaGadgetEvents a.calendarModeLink, .WaGadgetEvents a.rssFeedLabel, .WaGadgetEvents a.eventInfoBoxRegisterLink, .boxHeaderTitle a { color: var(--bcd-orange) !important; } /* Events listing links — hover state darker orange (fixes the blue) */ .WaGadgetEvents a.eventDetailsLink:hover, .WaGadgetEvents a.footerEventDetailsLink:hover, .WaGadgetEvents a.calendarModeLink:hover, .WaGadgetEvents a.rssFeedLabel:hover, .WaGadgetEvents a.eventInfoBoxRegisterLink:hover, .boxHeaderTitle a:hover { color: var(--bcd-orange-dark) !important; } /* end of Behind Closed Doors override v5 ---------------------------- */