/* Website → CSS (WA stores this as resources/theme/user.css). Loads after the theme, so keep it to things the theme genuinely cannot reach. The Google Fonts @import that used to sit at the top of this file is gone: Inter is self-hosted by the theme (Styles/fonts.less + Fonts/inter_variable_*.woff2). Re-adding it would shadow the self-hosted faces and reintroduce a third-party request from every page load. What remains styles the membership application while it is embedded as a widget in the React site at animacionesmia.com (body.widgetMode). Delete this whole file once that site is retired and the DNS switch is done. */ body.widgetMode, body.widgetMode .WaGadgetMembershipApplication, body.widgetMode .gadgetStyleBody { background: transparent !important; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; color: #ffffff !important; } body.widgetMode .formTitle, body.widgetMode .fieldLabel, body.widgetMode .mandatoryLabel, body.widgetMode .labelTitle, body.widgetMode .labelSubTitle, body.widgetMode .levelLabel, body.widgetMode .levelPrice { color: #ffffff !important; } body.widgetMode .typeInstruction, body.widgetMode .levelRenewal, body.widgetMode .levelRecurring, body.widgetMode .levelDescription { color: #d1d5db !important; } /* #ec6169, not #d8242e: this text sits on the dark widget background */ body.widgetMode .mandatorySymbol, body.widgetMode a { color: #ec6169 !important; } body.widgetMode .nextButton, body.widgetMode input[type="submit"], body.widgetMode input[type="button"], body.widgetMode button { background: #d8242e !important; border: 1px solid #d8242e !important; color: #fff !important; border-radius: 8px !important; } body.widgetMode .nextButton:hover, body.widgetMode input[type="submit"]:hover, body.widgetMode input[type="button"]:hover, body.widgetMode button:hover { background: #b81d26 !important; border-color: #b81d26 !important; } body.widgetMode input[type="text"], body.widgetMode input[type="email"], body.widgetMode input[type="password"], body.widgetMode input[type="tel"], body.widgetMode select, body.widgetMode textarea { background: #1f2937 !important; color: #fff !important; border: 1px solid #374151 !important; border-radius: 8px !important; } /* --------------------------------------------------------------------------- Dark pages. animacionesmia.com keeps a light body but paints /socias and /membresia full-bleed #111827, so those are per-page, not theme-wide. WA has no page-level background setting, hence the PAGEID hooks below (see docs/wa-help/Customizing your site/page-id.md). PAGEID_1075175 = Socias (member gallery) PAGEID_1075135 = public profile page reached from a gallery card PAGEID_1075136 = Sys/PublicProfile/SendEmail — the "send a message" form reached from that profile, so it has to match it PAGEID_1075129 = Sys/Login (authorisation required) PAGEID_1075131 = Sys/ResetPasswordRequest PAGEID_1075173 = Membresía (join flow) Add further dark pages to both selector lists below. */ #PAGEID_1075175 .zoneContent, #PAGEID_1075135 .zoneContent, #PAGEID_1075136 .zoneContent, #PAGEID_1075129 .zoneContent, #PAGEID_1075131 .zoneContent, #PAGEID_1075173 .zoneContent { background: #111827; color: #d1d5db; } /* headings inside a dark page: the theme's basic set is dark-on-light */ #PAGEID_1075175 .zoneContent :is(h1, h2, h3, h4, h5), #PAGEID_1075135 .zoneContent :is(h1, h2, h3, h4, h5), #PAGEID_1075136 .zoneContent :is(h1, h2, h3, h4, h5), #PAGEID_1075129 .zoneContent :is(h1, h2, h3, h4, h5), #PAGEID_1075131 .zoneContent :is(h1, h2, h3, h4, h5), #PAGEID_1075173 .zoneContent :is(h1, h2, h3, h4, h5) { color: #ffffff; } /* --------------------------------------------------------------------------- The light bar above the header. WA writes style="margin-top:17px" on the header's layout container (#id_wiSuNsr inside .zoneHeader1). It is a nudge saved from the site editor's layout spacing, not anything the theme asks for, and an inline style outranks every stylesheet - so the theme's own `.zoneHeader1 [class*="WaLayoutContainer"] { margin: 0 }` loses and !important is the only way to reach it. Those 17px surfaced as a near-white bar in two different guises: - Desktop. The mobile-panel row above the header is display:none, so the margin has no in-flow sibling to push against and collapses upward through .mLayout and out of altogether. body's border box then starts 17px down the viewport, and that strip paints as canvas - which is body's own #f8f9fa. Nothing is in it: elementFromPoint at y=8 returns . Every page was affected, since the header lives in the shared master layout. - Mobile (max 767px). There the mobile panel is a real 50px bar, so the margin stays in flow and separates the two black bars with a light stripe. Zeroing it seats the header flush at the top on desktop (measured: body top 17 -> 0) and merges the two bars into one 115px chrome on mobile. The -32px inline margin on the login button gadget beside it is deliberate and stays - this selector reaches layout containers only. Worth zeroing in the site editor too, at Header 1's layout spacing; this rule then just keeps the bar from coming back the next time someone drags it. */ .zoneHeader1 [class*="WaLayoutContainer"] { margin-top: 0 !important; } /* The logo's link, shrink-wrapped to the logo. The anchor added in theme/Gadgets/AccountLogo/GadgetTemplate.tpl is inline and wraps a display:block , so its block fragment spans the whole container. On desktop that made the empty header to the right of the logo clickable: measured 32-174 against an image ending at 126, i.e. 48px of invisible link. Shrink-wrapping makes the hit area exactly the image, and the focus ring with it. No effect on mobile - the flex centring in the merged bar already sizes the wrapper to its content, so the hit area was 140-234 for a 141-234 logo. */ .WaGadgetAccountLogo a { display: block; width: fit-content; } /* --------------------------------------------------------------------------- One header bar on mobile instead of two. WA's mobile menu can only live in the Mobile panel placeholder, and the master layout puts that placeholder in its own row *above* the header zone. Below 767px the theme hides the horizontal menu and the login button, so the header row is left holding nothing but the logo: 50px of icons stacked on 65px of logo, 115px of chrome on a 375px screen for three items that fit in one row. Worse than the waste: `.mobilePanelContainer` is not sticky, only `.zoneHeader1` is. Scrolling left a sticky bar containing just the logo, with the menu and the login button scrolled off the top - so past the first screenful there was no way to reach the navigation at all without scrolling back up. Fixing the panel row to the top and folding the header up underneath it puts the hamburger, the logo and the login icon in one 64px bar, all three always reachable. What each declaration is for: pointer-events `.mobilePanel` is a full-width box laid over the header, so it hit-tests before anything in the header row does. Re-enabled on the two buttons and the two dropdowns. Nothing under it is interactive today - the logo is a bare with no anchor - so this is insurance, and it is what stops the bar from eating the first thing anyone links or adds in that row. background the panel's own black would otherwise paint over the logo behind it (z-index 51 vs the header's 50). The bar stays black because .zoneHeader1 already is. height: 64px on the panel, not just the container: `.menuInner` and `.loginInner` are `top: 100%` of `.mobilePanel`, so this is what makes the dropdowns open flush with the header's bottom edge rather than 14px up inside it. top: 7px centres the 50px buttons in the 64px bar - (64-50)/2 - so the icons line up with the logo's centre rather than sitting high. Matches the theme's own 3-class specificity, which plain `.mobilePanelButton` loses to. max-height required, not polish. A fixed container cannot be scrolled by the page, so in landscape (375px tall) the last menu items became unreachable - the menu now scrolls itself. dvh second so browsers without it keep the vh line. The flex block centres the logo in both axes. It has to go on .gadgetStyleBody because the editor writes `style="text-align: Left"` on the div inside it, and the img is display:block, which text-align could not have moved anyway. Above 767px nothing here applies - verified identical at 768px with the block disabled. */ @media screen and (max-width: 767px) { .mobilePanelContainer { position: fixed; top: 0; left: 0; right: 0; z-index: 51; height: 64px; } .mobilePanelContainer, .WaGadgetMobilePanel .mobilePanel { pointer-events: none; } .WaGadgetMobilePanel .mobilePanel { height: 64px; background: transparent; } .WaGadgetMobilePanel .mobilePanel .mobilePanelButton { top: 7px; pointer-events: auto; } .WaGadgetMobilePanel .menuInner, .WaGadgetMobilePanel .loginInner { pointer-events: auto; overflow-y: auto; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); } .zoneHeader1 { padding-left: 50px; padding-right: 50px; } .zoneHeader1 .WaGadgetAccountLogo .gadgetStyleBody { display: flex; align-items: center; justify-content: center; height: 64px; } } /* --------------------------------------------------------------------------- Full-width pages. Every page on this site - content, gadget and system - shares one page template, and a master layout is a property of the template, not of the page. So there is no way to make one page full width from the admin without a second template, which would mean maintaining the header and footer gadgets twice. Done per page here instead. PAGEID_1075249 = Inicio (5 section gadgets, Content placeholder) PAGEID_1075185 = Sobre Nosotras (1 gadget, Header 1 placeholder) PAGEID_1075251 = Directiva (1 gadget, Header 1 placeholder) PAGEID_1075252 = Fundadoras (1 gadget, Header 1 placeholder) PAGEID_1075184 = Contacto (1 gadget, Header 1 placeholder) Both zones are listed for every page because a page's gadget can sit in either; the unused one is empty and unaffected. The `>` matters. With a descendant selector these rules also matched the FOOTER placeholder on production, because a malformed gadget there left `.zoneHeader2` unclosed and every later zone nested inside it - so the footer went full width (1521px against the intended 1216px). A direct-child selector cannot reach a placeholder that is nested deeper, whatever WA's markup does. zoneHeader1 (logo and nav) and the footer zones stay boxed on purpose: full-bleed sections under a boxed nav is what animacionesmia.com does. Only add a page whose HTML re-constrains its own text. All four do - Inicio and Sobre Nosotras with .container { max-width: 1280px; margin: 0 auto }, Directiva and Fundadoras with max-widths on .dir-grid / .fund-grid and their hero copy, Contacto with .contact-grid { max-width: 1100px; margin: 0 auto }. Checked at a 1600px viewport: sections 1585, text 600-1280, no horizontal scroll. A page built in WA's editor has no such container and should stay boxed. Page ids are identical on the clone and on production (verified: Inicio is 1075249 on both), so this list transfers as-is at replication. The margin resets kill the theme's 10px inter-gadget gap, which shows as a white seam between full-bleed bands against the #f8f9fa page background. WaLayoutContainer is in there because WA emits an empty .WaLayoutContainerFirst above the gadgets carrying the same 10px - that one was the bar between the header and the hero. */ :is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251, #PAGEID_1075252, #PAGEID_1075184) :is(.zoneHeader2, .zoneContent) { padding: 0; } :is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251, #PAGEID_1075252, #PAGEID_1075184) :is(.zoneHeader2, .zoneContent) > .WaPlaceHolder { max-width: none; } :is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251, #PAGEID_1075252, #PAGEID_1075184) :is(.zoneHeader2, .zoneContent) > .WaPlaceHolder > div { padding: 0; } :is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251, #PAGEID_1075252, #PAGEID_1075184) :is(.zoneHeader2, .zoneContent) [class^="WaGadget"], :is(#PAGEID_1075249, #PAGEID_1075185, #PAGEID_1075251, #PAGEID_1075252, #PAGEID_1075184) :is(.zoneHeader2, .zoneContent) [class^="WaLayoutContainer"] { margin-bottom: 0; } /* the gallery's own search label and result count sit on that dark ground */ #PAGEID_1075175 .memberDirectorySearchAreaOuterContainer label, #PAGEID_1075175 .memberDirectorySearchAreaOuterContainer .searchResult { color: #d1d5db; } /* The four dark content pages paint their surface inside the gadget (.mia-about, .dir-page, .fund-page, .contact-wrap). Sobre Nosotras used to do it with a bare `body` rule, which also overrode the theme elsewhere on the page; now that its CSS is scoped, the page background belongs here instead. */ :is(#PAGEID_1075185, #PAGEID_1075251, #PAGEID_1075252, #PAGEID_1075184) { background: #111827; } /* Inicio's live socias count. The page carries a Member Directory gadget purely as a data source: the script in Global JavaScript reads the count WA renders into #membersFound and writes it into the "Socias activas" stat, so the home page and /Socias can never disagree. Parked off-screen rather than display:none - a display:none gadget can skip work that depends on layout, and this one has to actually render to produce a count. aria-hidden is not set here because the markup is not ours to annotate; the duplicate content is off-screen but still in the accessibility tree, which is a known wart of this approach. */ #PAGEID_1075249 .WaGadgetMemberDirectory { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --------------------------------------------------------------------------- MIANIMA's pale pink headings (PAGEID_1075261). The page is built in WA's rich-text editor, which stores colour choices as legacy `` attributes. Eight headings carry #F6A1A6, which on the #f8f9fa page measures **1.89:1** - it fails even the 3:1 bar that large text is allowed, and at 30px it is barely visible at all. A `color` attribute is a presentational hint, so any author rule beats it; the attribute selector needs the `i` flag because the page mixes #F6A1A6 and #f6a1a6. Brand red rather than a lighter pink on purpose: at 4.73:1 it also clears the 4.5:1 bar for normal text, so it stays compliant if anyone later shrinks these headings. The page's other two swatches (#F35E24 at 3.09, #ef5564 at 3.24) pass as large text and are left alone. The durable fix is for whoever edits the page to stop choosing that swatch; this rule is here because a stylesheet survives the next edit and the editor does not. */ #PAGEID_1075261 font[color="#f6a1a6" i] { color: #d8242e; } /* --------------------------------------------------------------------------- Cookie banner (vanilla-cookieconsent 3.1.0, self-hosted from /resources/cookieconsent/, driven by site-content/cookie-consent.js). The library is themed entirely through custom properties on its own #cc-main root, so there are no vendor class names to hard-code and nothing here can leak onto WA markup. These are the same three properties the React app sets in useCookieConsent.ts - both sites get the same red. Accept and Reject need no help to be equally prominent: the library renders them as equal-weight buttons unless guiOptions.equalWeightButtons is turned off, and it is not. */ #cc-main { --cc-btn-primary-bg: #d8242e; --cc-btn-primary-hover-bg: #b01f28; --cc-toggle-on-bg: #d8242e; }