/* ============================================================================= Nicasio Wild Apricot Theme 11 Light, editorial-modern. Built on Wild Apricot's "Kaleidoscope" v3.0 base theme. Paste into Website > CSS (User.css); it loads after the base theme. ----------------------------------------------------------------------------- THE SYSTEM (see SYSTEM.md): Type 12 treatments, defined ONCE in section 1. No other rule in this file sets font-family, font-size or font-weight (icons excepted, section 1b). Sections 4: .n11-section (paper) · --tint · --ink · --media Cards 4: .n11-card (media) · .n11-tile (text) · .n11-row (list row / ticket) · .n11-stat Buttons 1 family: .n11-btn (primary) · --secondary · --text · .n11-icon-btn Form 1 style (section 4) REBRANDING: the :root block below. Nothing else needs to change. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap'); :root { /* --- Palette: cool sage paper, green-black ink, ONE saturated accent -------- */ --n11-paper: #F1F4EE; /* page background */ --n11-paper-2: #E2E9DC; /* the tint section */ --n11-ink: #142019; /* text; the ink section */ --n11-ink-2: #43514A; /* secondary text */ --n11-ink-3: #5A6860; /* captions, meta (5.3:1 on paper, 4.7:1 on tint) */ --n11-line: #C3CEBF; /* rules, borders */ --n11-white: #FFFFFF; /* cards and inputs on paper */ --n11-accent: #B83C0C; /* THE colour: persimmon (5.1:1 on paper, 4.6:1 on tint) */ --n11-accent-hover: #8F2E09; --n11-on-accent: #FFFFFF; /* text on the accent */ /* --- Highlight: a second, separate pair (NOT accents) ---------------------- */ --n11-highlight: #9BE8BA; /* soft mint: icon discs, tags, focus ring; links on ink. Reads against the tint */ --n11-highlight-ink: #0A5C36; /* deep green for icons/text on the mint or beside it (5.6:1 on mint, 6.5:1 on tint) */ /* --- Fonts: two families --------------------------------------------------- */ --n11-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --n11-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --n11-icons: 'Font Awesome 5 Pro', 'Font Awesome 5 Free'; /* WA ships FA5 Pro */ /* --- Type scale: 7 large + 5 small (section 1 applies them) --------------- */ --n11-display-size: clamp(44px, min(7vw, 10.7vh), 96px); --n11-h1-size: clamp(40px, 5.2vw, 72px); --n11-h2-size: clamp(32px, 3.75vw, 52px); --n11-h3-size: clamp(23px, 2.2vw, 30px); --n11-h4-size: 20px; --n11-h6-size: 13px; --n11-lead-size: clamp(18px, 1.5vw, 21px); --n11-body-size: 17px; --n11-label-size: 15px; --n11-caption-size: 14px; --n11-quote-size: clamp(21px, 1.9vw, 26px); /* --- Spacing scale ---------------------------------------------------------- */ --n11-s1: 8px; --n11-s2: 16px; --n11-s3: 24px; --n11-s4: 32px; --n11-s5: 48px; --n11-s6: 64px; --n11-section: clamp(64px, 8vw, 112px); /* top and bottom padding of every section */ /* --- Layout ------------------------------------------------------------------ */ --n11-max: 1240px; /* content width */ --n11-gutter: 24px; --n11-radius: 6px; --n11-masthead: 104px; /* header masthead (scrolls away) */ --n11-header: 56px; /* header nav row (stays) */ /* --- Mobile bar logo (WA's mobile panel, under 1080px) ---------------------- */ --n11-logo-url: url('../img/nicasio-lockup-ink.svg'); --n11-logo-w: 135px; /* its width at 32px tall (Nicasio's official lockup is 4.22:1) */ /* --- Colour context (sections redefine these; do not edit) ------------------ */ --n11-bg: var(--n11-paper); --n11-fg: var(--n11-ink); --n11-fg-2: var(--n11-ink-2); --n11-fg-3: var(--n11-ink-3); --n11-rule: var(--n11-line); --n11-surface: var(--n11-white); --n11-link: var(--n11-accent); } /* ============================================================================= 1. TYPE SCALE — the only place type is set. 7 large + 5 small treatments. An element looks the same on every page; only colour changes with context. WA system markup is mapped onto the same 12 treatments here. ============================================================================= */ /* BODY · sans 400 · 17/1.6 ---------------------------------------------------- */ body.LayoutMain, body.LayoutMain .mLayout, body.LayoutMain p, body.LayoutMain li, body.LayoutMain td, body.LayoutMain dd, body.LayoutMain input, body.LayoutMain select, body.LayoutMain textarea, body.LayoutMain button, body.LayoutMain label, body.LayoutMain .n11-body, body.LayoutMain .gadgetStyleBody, body.LayoutMain .WaGadgetContent, body.LayoutMain .WaGadgetCustomMenu a, body.LayoutMain .WaGadgetMenuVertical .menuInner ul.firstLevel > li > .item > a, body.LayoutMain .boxBodyContentContainer, body.LayoutMain .memberValue, body.LayoutMain .fieldBody, body.LayoutMain .fieldSubContainer, body.LayoutMain .infoOuterContainer .infoSection .infoText, body.LayoutMain .eventInfoBoxValue, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$='TextBox'] input[class$='TextBoxControl'], body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li > .item > a, body.LayoutMain .WaGadgetBlog .controlPanel .controlPanelInner a.readMore ~ a, body.LayoutMain #idRememberMe label, body.LayoutMain .loginActionRememberMe label { font-family: var(--n11-sans); font-size: var(--n11-body-size); font-weight: 400; font-style: normal; line-height: 1.6; letter-spacing: 0; text-transform: none; } body.LayoutMain strong, body.LayoutMain b { font-weight: 600; } /* inside body text this IS the h5 treatment */ body.LayoutMain em, body.LayoutMain i:not([class*='fa']) { font-style: italic; } /* DISPLAY · serif 400 · 96/0.98 (hero, join band) ----------------------------- */ body.LayoutMain .n11-display { font-family: var(--n11-serif); font-size: var(--n11-display-size); font-weight: 400; font-style: normal; line-height: .98; letter-spacing: -0.015em; text-transform: none; } /* H1 · serif 400 · 72/1.02 ------------------------------------------------------ */ body.LayoutMain h1, body.LayoutMain .n11-h1, body.LayoutMain h1.pageTitle, body.LayoutMain .WaGadgetEventsStateDetails .pageTitleContainer h1.pageTitle, html:not([class*='WaPlaceHolder']) body.LayoutMain .WaGadgetBlogStateDetails .boxHeaderOuterContainer h4.boxHeaderTitle { font-family: var(--n11-serif); font-size: var(--n11-h1-size); font-weight: 400; font-style: normal; line-height: 1.02; letter-spacing: -0.01em; text-transform: none; } /* H2 · serif 400 · 52/1.06 ------------------------------------------------------ */ body.LayoutMain h2, body.LayoutMain .n11-h2 { font-family: var(--n11-serif); font-size: var(--n11-h2-size); font-weight: 400; font-style: normal; line-height: 1.06; letter-spacing: -0.005em; text-transform: none; } /* H3 · serif 400 · 30/1.15 (card, ticket and form titles) ----------------------- */ body.LayoutMain h3, body.LayoutMain .n11-h3, body.LayoutMain h3.sectionTitle, body.LayoutMain h3.formTitle, body.LayoutMain .formTitleOuterContainer h3.formTitle, body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer h4.boxHeaderTitle, html:not([class*='WaPlaceHolder']) body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer h4.boxHeaderTitle, html:not([class*='WaPlaceHolder']) body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer h3.sectionTitle, html:not([class*='WaPlaceHolder']) body.LayoutMain .WaGadgetEventsStateList h3.sectionTitle, html:not([class*='WaPlaceHolder']) body.LayoutMain .WaGadgetBlog .blogCommentsOuterContainer h3.sectionTitle, html:not([class*='WaPlaceHolder']) body.LayoutMain .WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer h4.boxHeaderTitle, body.LayoutMain .WaGadgetUpcomingEvents li .title a, body.LayoutMain .WaGadgetRecentBlogPosts li .title a, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li > .item > a { font-family: var(--n11-serif); font-size: var(--n11-h3-size); font-weight: 400; font-style: normal; line-height: 1.15; letter-spacing: 0; text-transform: none; } /* H4 · sans 600 · 20/1.3 -------------------------------------------------------- */ body.LayoutMain h4, body.LayoutMain .n11-h4, body.LayoutMain .n11-faq summary { font-family: var(--n11-sans); font-size: var(--n11-h4-size); font-weight: 600; font-style: normal; line-height: 1.3; letter-spacing: -0.01em; font-variation-settings: normal; text-transform: none; } /* H5 · sans 600 · 17/1.4 (= bold body) ------------------------------------------ */ body.LayoutMain h5, body.LayoutMain .n11-h5, body.LayoutMain .membersTable h5, body.LayoutMain .WaGadgetForumUpdates li .title a { font-family: var(--n11-sans); font-size: var(--n11-body-size); font-weight: 600; font-style: normal; line-height: 1.4; letter-spacing: 0; font-variation-settings: normal; text-transform: none; } /* H6 · sans 600 · 13/1.3 · uppercase (eyebrows, footer column heads) ------------ */ body.LayoutMain h6, body.LayoutMain .n11-h6, body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer h4.infoTitle, html:not([class*='WaPlaceHolder']) body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer h4.infoTitle, body.LayoutMain .WaGadgetEventsStateDetails .eventInfoBoxLabel, body.LayoutMain .infoOuterContainer .infoSection .infoTitle { font-family: var(--n11-sans); font-size: var(--n11-h6-size); font-weight: 600; font-style: normal; line-height: 1.3; letter-spacing: .08em; font-variation-settings: normal; text-transform: uppercase; } /* LEAD · sans 400 · 21/1.5 ------------------------------------------------------ */ body.LayoutMain .n11-lead, body.LayoutMain .WaGadgetEventsStateDetails .boxBodyContentOuterContainer .boxBodyContentContainer > .inner > p:first-child, body.LayoutMain .WaGadgetBlogStateDetails .boxBodyContentContainer > .inner > p:first-child { font-family: var(--n11-sans); font-size: var(--n11-lead-size); font-weight: 400; font-style: normal; line-height: 1.5; letter-spacing: 0; font-variation-settings: normal; text-transform: none; } /* LABEL · sans 600 · 15/1.25 (buttons, navigation, form labels, table heads) ---- */ body.LayoutMain .n11-label, body.LayoutMain .n11-btn, body.LayoutMain .stylizedButton, body.LayoutMain input[type='submit'], body.LayoutMain input[type='button'], body.LayoutMain button.typeButton, body.LayoutMain .functionalButton, body.LayoutMain .loginButton, body.LayoutMain .navigationOuterContainer input.typeButton, body.LayoutMain .navigationOuterContainer input[type=submit], body.LayoutMain .WaGadgetEventsStateDetails .boxActionContainer input, body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxActionContainer input.typeButton, body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxActionContainer input.typeButton, body.LayoutMain .WaGadgetBlog .addNewCommentOuterContainer .boxActionContainer input[type=submit], body.LayoutMain #idLoginButtonBox span input.loginButton, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton, body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a, body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul li > .item > a, body.LayoutMain th, body.LayoutMain table.membersTable th, body.LayoutMain .n11-field > span, body.LayoutMain .fieldLabel, body.LayoutMain .fieldSubContainer .fieldLabel .mandatoryLabel, body.LayoutMain #idLoginBox > span.mandatory, body.LayoutMain #idPasswordBox > span.mandatory, body.LayoutMain .memberDirectorySearchArea label, body.LayoutMain .WaGadgetEvents .showDetails, body.LayoutMain .WaGadgetEventsStateList .boxFooterContainer a, body.LayoutMain .WaGadgetEventsStateList .pageTitleOuterContainer .pageViewSwitcherContainer a, body.LayoutMain .WaGadgetBlog .controlPanel .controlPanelInner a, body.LayoutMain .wa-authenticateLoginLink, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginText, body.LayoutMain .WaGadgetEventsStateDetails .regTypeLiLabel strong, body.LayoutMain .n11-stub__mon { font-family: var(--n11-sans); font-size: var(--n11-label-size); font-weight: 600; font-style: normal; line-height: 1.25; letter-spacing: 0; font-variation-settings: normal; text-transform: none; } /* CAPTION · sans 400 · 14/1.45 (captions, dates, meta, fine print) -------------- */ body.LayoutMain .n11-caption, body.LayoutMain figcaption, body.LayoutMain small, body.LayoutMain cite, body.LayoutMain .WaGadgetBreadcrumbs, body.LayoutMain .WaGadgetBreadcrumbs a, body.LayoutMain .WaGadgetBreadcrumbs span, body.LayoutMain .WaGadgetSiteSearch .searchBoxField, body.LayoutMain .WaGadgetBlog .boxBodyInfoOuterContainer h5, body.LayoutMain .WaGadgetBlog .boxInfoContainer h5, body.LayoutMain .WaGadgetUpcomingEvents li .date, body.LayoutMain .WaGadgetUpcomingEvents li .location, body.LayoutMain .WaGadgetRecentBlogPosts li .date, body.LayoutMain .WaGadgetRecentBlogPosts li .author, body.LayoutMain .WaGadgetForumUpdates li .date, body.LayoutMain .WaGadgetForumUpdates li .author, body.LayoutMain .WaGadgetEventsStateList .boxBodyInfoOuterContainer .eventInfoBoxValue, body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer ul.registrationInfo li div, body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList td.left, body.LayoutMain .mandatoryFieldsTitle, body.LayoutMain .mandatoryFieldsTitle strong, body.LayoutMain .formTitleOuterContainer .mandatoryFieldsTitle, body.LayoutMain .memberDirectorySearchArea .searchResult, body.LayoutMain .memberDirectorySearchArea .searchResult em, body.LayoutMain .advSearchContainerLink, body.LayoutMain .advSearchContainerLink a, body.LayoutMain #idForgotLinkBox a, body.LayoutMain .loginPasswordForgot a, body.LayoutMain .validationError, body.LayoutMain .eventBackLink, body.LayoutMain .pageBackContainer a, body.LayoutMain .WaGadgetEventsStateDetails .pageTitleOuterContainer .pageBackContainer a, body.LayoutMain .WaGadgetForum .pageTitleOuterContainer .pageBackContainer a, body.LayoutMain .WaGadgetMemberDirectoryStateList .memberDirectorySearchAreaOuterContainer .searchResult #membersFound, body.LayoutMain .WaGadgetEvents .calendarModeLink { font-family: var(--n11-sans); font-size: var(--n11-caption-size); font-weight: 400; font-style: normal; line-height: 1.45; letter-spacing: 0; font-variation-settings: normal; text-transform: none; } /* QUOTE · serif italic 400 · 26/1.3 (blockquotes, testimonials) ----------------- */ body.LayoutMain blockquote, body.LayoutMain blockquote p, body.LayoutMain .n11-quote { font-family: var(--n11-serif); font-size: var(--n11-quote-size); font-weight: 400; font-style: italic; line-height: 1.3; letter-spacing: -0.01em; text-transform: none; } /* inline elements take their parent's treatment */ body.LayoutMain a, body.LayoutMain span:not([class*='n11-']), body.LayoutMain code, body.LayoutMain h1 a, body.LayoutMain h2 a, body.LayoutMain h3 a, body.LayoutMain h4 a, body.LayoutMain h5 a, body.LayoutMain .WaGadgetEventsStateList h4.boxHeaderTitle a, body.LayoutMain .WaGadgetBlog h4.boxHeaderTitle a, body.LayoutMain .WaGadgetBlog .boxBodyInfoOuterContainer h5 a, body.LayoutMain .WaGadgetEvents table.pastEventsList a { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } body.LayoutMain ::placeholder { font: inherit; } /* --- 1b. ICONS: Font Awesome 5 (Pro on Wild Apricot, Free in the local demo) -- */ body.LayoutMain .n11-btn::after, body.LayoutMain .stylizedButton::after, body.LayoutMain .WaGadgetBlog .controlPanel .controlPanelInner a.readMore::after, body.LayoutMain .WaGadgetEventsStateList .boxFooterContainer a::after, body.LayoutMain .eventBackLink::before, body.LayoutMain .pageBackContainer a::before, body.LayoutMain .WaGadgetEventsStateDetails .pageTitleOuterContainer .pageBackContainer a::before, body.LayoutMain .WaGadgetForum .pageTitleOuterContainer .pageBackContainer a::before, body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a > span::before, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .mobilePanelButton::before, body.LayoutMain .WaGadgetSiteSearch .searchBoxFieldContainer::before, body.LayoutMain .n11-faq summary::after, body.LayoutMain .n11-check li::before { font-family: var(--n11-icons); font-weight: 900; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; font-size: .9em; } body.LayoutMain .WaGadgetSocialProfile a::before { font-family: 'Font Awesome 5 Brands'; font-weight: 400; font-style: normal; line-height: 1; font-size: 16px; -webkit-font-smoothing: antialiased; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .mobilePanelButton::before { font-size: 22px; } body.LayoutMain .WaGadgetSocialProfile a.Blog::before, body.LayoutMain .WaGadgetSocialProfile a.RSS::before { font-family: var(--n11-icons); font-weight: 900; } /* icon sizes (Font Awesome elements in the markup) */ body.LayoutMain .n11-meta i { font-size: 12px; } body.LayoutMain .n11-btn > i { font-size: .95em; } body.LayoutMain .n11-tile__icon { font-size: 18px; } body.LayoutMain .n11-row__stub .n11-tile__icon { font-size: 20px; } /* the social gadget's own text label is hidden; only the icon shows */ body.LayoutMain .WaGadgetSocialProfile a, body.LayoutMain .WaGadgetSocialProfile.gadgetThemeStyle li a { font-size: 0; } /* ============================================================================= 2. BASE: resets against Kaleidoscope, links, editor elements ============================================================================= */ html { scroll-behavior: auto; } body.LayoutMain, body.LayoutMain .mLayout { background: var(--n11-paper) !important; color: var(--n11-fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.LayoutMain { overflow-x: clip; } body.LayoutMain img { max-width: 100%; height: auto; } /* width/height attributes keep their ratio */ .zonePlace { padding: 0; } body .WaPlaceHolder { max-width: none; margin: 0; padding: 0; } body .WaPlaceHolder > div { padding: 0; } .zoneWAbranding, #idFooterPoweredByContainer { display: none; } #idWaAdminSwitcher { z-index: 50000; } .WaGadgetCustomHTML { margin: 0; } .gadgetStyleNone .gadgetStyleBody, .gadgetStyle001 .gadgetStyleBody, .gadgetStyle002 .gadgetStyleBody { background: transparent; border: 0; } [class^='WaLayoutContainer'] > .WaLayoutTable { width: 100%; } /* Standard WA gadgets in the content zone sit in the content column; Custom HTML sections are full-bleed. */ .zoneContent .WaPlaceHolderContent > div > :not(.WaGadgetCustomHTML), .zoneHeader2 .WaPlaceHolderHeader1 > div > :not(.WaGadgetCustomHTML), body.LayoutMain .n11-wrap { box-sizing: border-box; width: 100%; max-width: var(--n11-max); margin-left: auto; margin-right: auto; padding-left: var(--n11-gutter); padding-right: var(--n11-gutter); } /* spacing of standard gadgets: a run of them reads as one section */ .zoneContent .WaPlaceHolderContent > div > :not(.WaGadgetCustomHTML) { margin-top: var(--n11-s4); margin-bottom: 0; } .zoneContent .WaPlaceHolderContent > div > :not(.WaGadgetCustomHTML):first-child, .zoneContent .WaPlaceHolderContent > div > .WaGadgetCustomHTML + :not(.WaGadgetCustomHTML), .zoneContent .WaPlaceHolderContent > div > :not(.WaGadgetCustomHTML) + .WaGadgetCustomHTML { margin-top: var(--n11-section); } .zoneContent .WaPlaceHolderContent > div > :not(.WaGadgetCustomHTML):last-child { margin-bottom: var(--n11-section); } .zoneHeader2:has(.WaGadgetBreadcrumbs) + .zoneContent .WaPlaceHolderContent > div > :not(.WaGadgetCustomHTML):first-child { margin-top: var(--n11-s4); } body.LayoutMain .n11-narrow { max-width: 820px; } body.LayoutMain h1, body.LayoutMain h2, body.LayoutMain h3, body.LayoutMain h4, body.LayoutMain h5, body.LayoutMain h6 { color: var(--n11-fg); margin: 0 0 .5em; } body.LayoutMain p { margin: 0 0 1.1em; } body.LayoutMain p:last-child { margin-bottom: 0; } body.LayoutMain .n11-lead { color: var(--n11-fg-2); max-width: 38em; } body.LayoutMain .n11-caption, body.LayoutMain figcaption, body.LayoutMain small { color: var(--n11-fg-3); } body.LayoutMain .n11-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--n11-s2); color: var(--n11-link); } body.LayoutMain .n11-eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; flex: none; } body.LayoutMain a { color: var(--n11-link); text-decoration: none; } /* links in running text: a hairline underline that lifts on hover */ body.LayoutMain .gadgetContentEditableArea p:not([class]) a:not([class]), body.LayoutMain .gadgetContentEditableArea li a:not([class]), body.LayoutMain .boxBodyContentContainer p a, body.LayoutMain .n11-prose a:not([class]) { color: var(--n11-fg); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color .2s ease, background-size .25s ease; } body.LayoutMain .gadgetContentEditableArea p:not([class]) a:not([class]):hover, body.LayoutMain .gadgetContentEditableArea li a:not([class]):hover, body.LayoutMain .boxBodyContentContainer p a:hover, body.LayoutMain .n11-prose a:not([class]):hover { color: var(--n11-link); background-size: 0 1px; } body.LayoutMain ul, body.LayoutMain ol { padding-left: 1.3em; margin: 0 0 1.1em; } body.LayoutMain li { margin: 0 0 .35em; } body.LayoutMain blockquote { margin: 1.6em 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--n11-accent); color: var(--n11-fg); } body.LayoutMain blockquote p { margin: 0 0 .4em; } body.LayoutMain blockquote cite { display: block; font-style: normal; color: var(--n11-fg-3); } body.LayoutMain hr { border: 0; border-top: 1px solid var(--n11-rule); margin: 2.4em 0; } body.LayoutMain code { padding: .1em .35em; background: var(--n11-paper-2); border-radius: 4px; } /* tables: content tables, member directory, past events */ body.LayoutMain .gadgetContentEditableArea table:not(.WaLayoutTable), body.LayoutMain table.membersTable, body.LayoutMain table.pastEventsList, body.LayoutMain .n11-table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; } body.LayoutMain .gadgetContentEditableArea table:not(.WaLayoutTable) th, body.LayoutMain table.membersTable th, body.LayoutMain .n11-table th { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--n11-fg); color: var(--n11-fg); background: transparent; } body.LayoutMain .gadgetContentEditableArea table:not(.WaLayoutTable) td, body.LayoutMain table.membersTable td, body.LayoutMain table.pastEventsList td, body.LayoutMain .n11-table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--n11-rule); vertical-align: top; } /* focus */ body.LayoutMain a:focus-visible, body.LayoutMain button:focus-visible, body.LayoutMain input:focus-visible, body.LayoutMain select:focus-visible, body.LayoutMain textarea:focus-visible, body.LayoutMain summary:focus-visible, body.LayoutMain [tabindex]:focus-visible { outline: 2px solid var(--n11-link); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--n11-accent); color: var(--n11-on-accent); } /* ============================================================================= 3. SECTIONS — four treatments, one class each. Spacing is the same for all. ============================================================================= */ body.LayoutMain .n11-section { --n11-bg: var(--n11-paper); --n11-surface: var(--n11-white); position: relative; background: var(--n11-bg); color: var(--n11-fg); padding: var(--n11-section) 0; } body.LayoutMain .n11-section--tint { --n11-bg: var(--n11-paper-2); --n11-surface: var(--n11-paper); } body.LayoutMain .n11-section--ink, body.LayoutMain .n11-section--media { --n11-bg: var(--n11-ink); --n11-fg: #F4F7F1; --n11-fg-2: rgba(244,247,241,.78); --n11-fg-3: rgba(244,247,241,.62); --n11-rule: rgba(244,247,241,.18); --n11-surface: rgba(244,247,241,.06); --n11-link: var(--n11-highlight); } /* full-bleed photo or film behind the content, under an ink scrim */ body.LayoutMain .n11-section--media { isolation: isolate; overflow: hidden; } body.LayoutMain .n11-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--n11-ink); container-type: size; } body.LayoutMain .n11-media img, body.LayoutMain .n11-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--n11-focus, 50% 50%); display: block; border: 0; } body.LayoutMain .n11-media iframe { position: absolute; left: 50%; top: 50%; border: 0; pointer-events: none; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); } body.LayoutMain .n11-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--n11-ink) 82%, transparent) 0%, color-mix(in srgb, var(--n11-ink) 46%, transparent) 42%, color-mix(in srgb, var(--n11-ink) 14%, transparent) 80%, color-mix(in srgb, var(--n11-ink) 26%, transparent) 100%), linear-gradient(to right, color-mix(in srgb, var(--n11-ink) 62%, transparent) 0%, color-mix(in srgb, var(--n11-ink) 24%, transparent) 50%, transparent 76%); } /* the section head: eyebrow, h2, lead, and an optional "View all" on the right */ body.LayoutMain .n11-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--n11-s3) var(--n11-s5); margin: 0 0 var(--n11-s5); } body.LayoutMain .n11-head h2 { margin: 0; max-width: 15em; } body.LayoutMain .n11-head .n11-lead { margin: var(--n11-s2) 0 0; } /* layouts inside sections */ body.LayoutMain .n11-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--n11-s5) var(--n11-s4); } body.LayoutMain .n11-grid--2 { --cols: 2; } body.LayoutMain .n11-grid--4 { --cols: 4; gap: var(--n11-s4) var(--n11-s3); } body.LayoutMain .n11-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--n11-s5) clamp(40px, 6.5vw, 96px); align-items: center; } body.LayoutMain .n11-split--top { align-items: start; } body.LayoutMain .n11-row-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--n11-s2) var(--n11-s4); margin-top: var(--n11-s4); } /* blocks that follow each other inside a section */ body.LayoutMain .n11-split + .n11-grid, body.LayoutMain .n11-split + .n11-figure, body.LayoutMain .n11-grid + .n11-grid, body.LayoutMain .n11-split + .n11-map { margin-top: var(--n11-s6); } body.LayoutMain .n11-lead + .n11-check, body.LayoutMain .n11-lead + .n11-pairs { margin-top: var(--n11-s4); } body.LayoutMain .n11-head + .n11-marquee { margin-top: 0; } body.LayoutMain .n11-page-hero h1 { margin: 0; max-width: 14em; } body.LayoutMain .n11-page-hero .n11-lead { margin: var(--n11-s3) 0 0; } body.LayoutMain .n11-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* reveals (theme.js): headings rise line by line, blocks fade up, once */ body.LayoutMain .n11-reveal .n11-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } body.LayoutMain .n11-reveal .n11-line > span { display: block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * .09s); } body.LayoutMain .n11-reveal.is-in .n11-line > span { transform: none; } html.n11-js .n11-fade { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } body.LayoutMain .n11-fade.is-in { opacity: 1; transform: none; } /* ============================================================================= 4. BUTTONS (one family) + FORM (one style) Calm hovers: a colour change and a 3px arrow nudge. No lift, no pull. ============================================================================= */ body.LayoutMain .n11-btn, body.LayoutMain .stylizedButton, body.LayoutMain input[type='submit'], body.LayoutMain input[type='button'], body.LayoutMain button.typeButton, body.LayoutMain .functionalButton, body.LayoutMain .loginButton, body.LayoutMain .navigationOuterContainer input.typeButton, body.LayoutMain .navigationOuterContainer input[type=submit], body.LayoutMain .WaGadgetEventsStateDetails .boxActionContainer input, body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxActionContainer input.typeButton, body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxActionContainer input.typeButton, body.LayoutMain .WaGadgetBlog .addNewCommentOuterContainer .boxActionContainer input[type=submit], body.LayoutMain #idLoginButtonBox span input.loginButton, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; height: 50px; min-width: 0; max-width: 100%; margin: 0; padding: 0 24px; background: var(--n11-accent); color: var(--n11-on-accent); border: 1px solid var(--n11-accent); border-radius: 999px; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; text-shadow: none; outline: 0; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } body.LayoutMain .n11-btn:hover, body.LayoutMain .stylizedButton:hover, body.LayoutMain input[type='submit']:hover, body.LayoutMain input[type='button']:hover, body.LayoutMain button.typeButton:hover, body.LayoutMain .loginButton:hover, body.LayoutMain .navigationOuterContainer input.typeButton:hover, body.LayoutMain .WaGadgetEventsStateDetails .boxActionContainer input:hover, body.LayoutMain #idLoginButtonBox span input.loginButton:hover { background: var(--n11-accent-hover); border-color: var(--n11-accent-hover); color: var(--n11-on-accent); } /* the arrow (Font Awesome arrow-right) */ body.LayoutMain .n11-btn::after, body.LayoutMain .stylizedButton::after { content: '\f061'; transition: transform .25s ease; } body.LayoutMain .n11-btn:hover::after, body.LayoutMain .stylizedButton:hover::after { transform: translateX(3px); } body.LayoutMain .n11-btn:has(> i)::after { content: none; } /* a button with its own leading icon has no arrow */ /* secondary: an outline in the text colour */ body.LayoutMain .n11-btn--secondary, body.LayoutMain .stylizedButton.buttonStyle002 { background: transparent; color: var(--n11-fg); border-color: var(--n11-fg); } body.LayoutMain .n11-btn--secondary:hover, body.LayoutMain .stylizedButton.buttonStyle002:hover { background: transparent; color: var(--n11-link); border-color: var(--n11-link); } /* text: no box */ body.LayoutMain .n11-btn--text, body.LayoutMain .stylizedButton.buttonStyle003 { height: auto; min-height: 28px; padding: 0; background: transparent; color: var(--n11-fg); border-color: transparent; border-radius: 0; } body.LayoutMain .n11-btn--text:hover, body.LayoutMain .stylizedButton.buttonStyle003:hover { background: transparent; color: var(--n11-link); border-color: transparent; } /* icon button: round, one icon (rail arrows, slideshow, video pause, social) */ body.LayoutMain .n11-icon-btn { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; margin: 0; border-radius: 999px; border: 1px solid var(--n11-rule); background: transparent; color: var(--n11-fg); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } body.LayoutMain .n11-icon-btn:hover { color: var(--n11-link); border-color: var(--n11-link); background: transparent; } body.LayoutMain .n11-icon-btn[hidden] { display: none; } /* a card or row that is one big link: its text button reacts to hovering the whole thing */ body.LayoutMain a:hover > .n11-btn--text, body.LayoutMain a:hover .n11-card__body > .n11-btn--text { color: var(--n11-link); } body.LayoutMain a:hover > .n11-btn--text::after, body.LayoutMain a:hover .n11-card__body > .n11-btn--text::after { transform: translateX(3px); } /* --- FORM: one field style for WA system forms and Custom HTML forms ---------- */ body.LayoutMain input[type='text'], body.LayoutMain input[type='password'], body.LayoutMain input[type='email'], body.LayoutMain input[type='tel'], body.LayoutMain input[type='number'], body.LayoutMain input[type='search'], body.LayoutMain input.typeText, body.LayoutMain select, body.LayoutMain textarea, body.LayoutMain .emailTextBoxControl, body.LayoutMain .passwordTextBoxControl, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$='TextBox'] input[class$='TextBoxControl'], body.LayoutMain .n11-input { box-sizing: border-box; width: 100%; max-width: 100%; height: 52px; padding: 0 16px; margin: 0; background: var(--n11-white); color: var(--n11-ink); border: 1px solid var(--n11-line); border-radius: var(--n11-radius); box-shadow: none; outline: 0; transition: border-color .2s ease, box-shadow .2s ease; } body.LayoutMain textarea, body.LayoutMain .n11-input--area { height: auto; min-height: 150px; padding: 14px 16px; resize: vertical; } body.LayoutMain input:focus, body.LayoutMain select:focus, body.LayoutMain textarea:focus { border-color: var(--n11-highlight-ink); box-shadow: 0 0 0 3px var(--n11-highlight); } body.LayoutMain input::placeholder, body.LayoutMain textarea::placeholder { color: var(--n11-ink-3); } body.LayoutMain input[type='checkbox'], body.LayoutMain input[type='radio'] { accent-color: var(--n11-accent); width: 18px; height: 18px; margin: 0 10px 0 0; vertical-align: -3px; } body.LayoutMain .n11-field { display: block; margin: 0 0 var(--n11-s3); } body.LayoutMain .n11-field > span, body.LayoutMain .fieldLabel { display: block; margin: 0 0 var(--n11-s1); color: var(--n11-fg); } body.LayoutMain .n11-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--n11-s3); } body.LayoutMain .n11-form .n11-field--full, body.LayoutMain .n11-form > .n11-btn { grid-column: 1 / -1; } body.LayoutMain .n11-form > .n11-btn { justify-self: start; } /* WA form containers: flatten the base theme's boxes */ body.LayoutMain .generalFormOuterContainer, body.LayoutMain .infoOuterContainer, body.LayoutMain .generalFormContainer, body.LayoutMain .formOuterContainer, body.LayoutMain .formContainer, body.LayoutMain .generalFieldsOuterContainer, body.LayoutMain .generalFieldsContainer, body.LayoutMain .infoContainer, body.LayoutMain .memberDirectorySearchAreaOuterContainer, body.LayoutMain .memberDirectoryOuterContainer, body.LayoutMain .upcomingEventsOuterContainer, body.LayoutMain .pastEventsOuterContainer, body.LayoutMain .blogPostListOuterContainer, body.LayoutMain .blogEntryOuterContainer, body.LayoutMain .boxOuterContainer, body.LayoutMain .boxBodyInfoOuterContainer, body.LayoutMain .boxBodyContentOuterContainer, body.LayoutMain .boxHeaderOuterContainer, body.LayoutMain .boxFooterOuterContainer, body.LayoutMain .pageViewSwitcherOuterContainer, body.LayoutMain .formTitleOuterContainer, body.LayoutMain .navigationOuterContainer { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; } body.LayoutMain [class*='Container'] > .d1, body.LayoutMain .d2, body.LayoutMain .d3, body.LayoutMain .d4, body.LayoutMain .d5, body.LayoutMain .d6, body.LayoutMain .d7, body.LayoutMain .d8, body.LayoutMain .d9 { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } body.LayoutMain .cornersContainer, body.LayoutMain .topCorners, body.LayoutMain .bottomCorners { display: none !important; } body.LayoutMain .clearEndContainer { clear: both; height: 0; } body.LayoutMain .WaGadgetEvents, body.LayoutMain .WaGadgetBlog, body.LayoutMain .WaGadgetForum, body.LayoutMain .WaGadgetMemberDirectory, body.LayoutMain .WaGadgetMembershipApplication, body.LayoutMain .WaGadgetAuthorizationRequired, body.LayoutMain .WaGadgetSubscriptionForm, body.LayoutMain .WaGadgetDonationForm, body.LayoutMain .WaGadgetEventRegistration, body.LayoutMain .gadgetSystem, body.LayoutMain .gadgetSystem .gadgetStyleBody { background: transparent !important; border: 0; box-shadow: none; } body.LayoutMain .formTitleOuterContainer { margin: 0 0 var(--n11-s3); color: var(--n11-fg); } body.LayoutMain .formTitleOuterContainer .formTitleContainer { padding: 0 0 var(--n11-s2); border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .formTitleOuterContainer .inner { display: flex; justify-content: space-between; align-items: baseline; gap: var(--n11-s3); flex-wrap: wrap; } body.LayoutMain .formTitleOuterContainer h3.formTitle { float: none; margin: 0; } body.LayoutMain .formTitleOuterContainer .mandatoryFieldsTitle, body.LayoutMain .mandatoryFieldsTitle { float: none; color: var(--n11-fg-3); margin: 0; } body.LayoutMain .mandatorySymbol, body.LayoutMain .mandatory { color: var(--n11-accent); } body.LayoutMain .fieldContainer { margin: 0 0 var(--n11-s3); } body.LayoutMain .fieldSubContainer table, body.LayoutMain .fieldSubContainer table tbody, body.LayoutMain .fieldSubContainer table tr, body.LayoutMain .fieldSubContainer table td, body.LayoutMain .fieldSubContainer > table .left, body.LayoutMain .fieldSubContainer > table .right { display: block; width: 100%; padding: 0; border: 0; text-align: left; } body.LayoutMain .fieldSubContainer > .fieldLabel, body.LayoutMain .fieldSubContainer > .fieldBody { float: none; width: auto; padding: 0; text-align: left; } body.LayoutMain .validationError { display: block; color: #B3261E; margin: 6px 0 0; } body.LayoutMain .kvTable { padding: var(--n11-s3); background: var(--n11-paper-2); border-radius: var(--n11-radius); margin: 0 0 var(--n11-s4); } body.LayoutMain .infoOuterContainer .infoSection { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px var(--n11-s2); margin: 0 0 10px; align-items: baseline; } body.LayoutMain .infoOuterContainer .infoSection .infoTitle, body.LayoutMain .infoOuterContainer .infoSection .infoText { float: none; width: auto; margin: 0; padding: 0; text-align: left; color: var(--n11-fg-3); } body.LayoutMain .infoOuterContainer .infoSection .infoText { color: var(--n11-fg); } body.LayoutMain .infoText .textLine { display: block; } body.LayoutMain .navigationContainer .inner > div { float: none; margin: 0; padding: 0; width: auto; } body.LayoutMain .navigationContainer .inner input { margin: 0; } body.LayoutMain .navigationContainer .inner { display: flex; justify-content: space-between; gap: 12px; padding: var(--n11-s3) 0 0; border-top: 1px solid var(--n11-rule); margin-top: var(--n11-s3); } body.LayoutMain .membershipLevels .membershipLevelItem, body.LayoutMain .fieldContainer.membershipLevelsContainer .fieldItem { display: block; padding: var(--n11-s2) 18px; margin: 0 0 10px; border: 1px solid var(--n11-line); border-radius: var(--n11-radius); background: var(--n11-white); } body.LayoutMain .WaGadgetMembershipApplication .generalFormOuterContainer, body.LayoutMain .WaGadgetMembershipApplication .navigationOuterContainer { max-width: 680px; } /* system login page (Sys/Login) */ body.LayoutMain .WaGadgetAuthorizationRequired { max-width: 520px; } body.LayoutMain .WaGadgetAuthorizationRequired .loginPageTable input[type='text'], body.LayoutMain .WaGadgetAuthorizationRequired .loginPageTable input[type='password'], body.LayoutMain .WaGadgetSubscriptionForm .fieldBody input { width: 100%; } body.LayoutMain .loginPageTable, body.LayoutMain .loginPageTable td { display: block; width: 100%; padding: 0; } body.LayoutMain #idLoginBox, body.LayoutMain #idPasswordBox, body.LayoutMain #idRememberMe { margin: 0 0 var(--n11-s3); } body.LayoutMain #idLoginBox > span.mandatory, body.LayoutMain #idPasswordBox > span.mandatory { display: inline-block; color: var(--n11-fg); margin: 0 0 var(--n11-s1); } body.LayoutMain #idSubmitBox { display: flex; align-items: center; gap: var(--n11-s3); } body.LayoutMain #idForgotLinkBox a, body.LayoutMain .loginPasswordForgot a { color: var(--n11-fg-2); } body.LayoutMain .password-wrapper { position: relative; } body.LayoutMain .openAuthFormContainer { margin: 0 0 var(--n11-s3); } body.LayoutMain .oAuthButtonsContainer { display: flex; flex-wrap: wrap; gap: var(--n11-s1); } body.LayoutMain .wa-authenticateLoginLink { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--n11-line); border-radius: 999px; background: var(--n11-white); color: var(--n11-ink); max-width: none; } body.LayoutMain .wa-authenticateLoginLink:hover { border-color: var(--n11-ink); color: var(--n11-ink); } body.LayoutMain .wa-authenticateLoginLink .authenticateLoginText { display: inline; } body.LayoutMain .wa-authenticateLoginLink .authenticateLoginIcon { width: 16px; height: 16px; border-radius: 50%; background: var(--n11-highlight); } body.LayoutMain .WaGadgetAuthorizationRequired .openAuthFormContainer + .authFormContainer { border-left: 0; } /* member directory */ body.LayoutMain .memberDirectorySearchArea .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--n11-s2); padding: 0 0 var(--n11-s3); } body.LayoutMain .memberDirectorySearchArea input[type='text'] { width: 340px; } body.LayoutMain .memberDirectorySearchArea .searchResult { color: var(--n11-fg-3); } body.LayoutMain .advSearchContainerLink { margin: 0 0 12px; } body.LayoutMain .membersTable tr.normal { cursor: pointer; transition: background-color .2s ease; } body.LayoutMain .membersTable tr.normal:hover { background: var(--n11-paper-2); } body.LayoutMain .membersTable h5 { margin: 0; } body.LayoutMain .membersTable h5 a { color: var(--n11-ink); } body.LayoutMain .membersTable tr:hover h5 a { color: var(--n11-accent); } body.LayoutMain .memberValue { color: var(--n11-fg-2); } /* donation goal */ body.LayoutMain .WaGadgetDonationGoal .progressBarTable { width: 100%; } body.LayoutMain .WaGadgetDonationGoal [class*='progressBar'] td { background: transparent; } body.LayoutMain .WaGadgetDonationGoal .goalProgressBar { background: var(--n11-accent); height: 8px; border-radius: 999px; } body.LayoutMain .WaGadgetDonationGoal .goalProgressBg { background: var(--n11-paper-2); height: 8px; border-radius: 999px; } /* subscription form */ body.LayoutMain .WaGadgetSubscriptionForm .subscriptionFormOuterContainer { max-width: 560px; } /* ============================================================================= 5. HEADER — an editorial MASTHEAD. Two layouts in WA's Header placeholder: masthead (search + social · centred logo · Log in, Join; scrolls away) over the nav row (the horizontal menu, centred between hairlines; stays). Once the masthead has gone, theme.js docks a small logo left and Join right of the nav row. Under 1080px WA's mobile panel takes over and theme.js copies search + buttons into its menu sheet. ============================================================================= */ .zoneHeader1 { position: sticky; top: calc(-1 * var(--n11-masthead)); z-index: 900; background: color-mix(in srgb, var(--n11-paper) 94%, transparent); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); } #idHeaderContentHolder > div > [class^='WaLayoutContainer'] { margin: 0; } #idHeaderContentHolder .WaLayoutSeparator { width: 0; } #idHeaderContentHolder .WaGadgetContent .gadgetStyleBody { padding: 0; } #idHeaderContentHolder .WaGadgetContent p { margin: 0; } #idHeaderContentHolder .WaLayoutTable { table-layout: fixed; } /* masthead: the first layout in the Header placeholder (three columns, logo centred) */ #idHeaderContentHolder > div > .WaLayoutContainerFirst { border-top: 4px solid var(--n11-ink); } #idHeaderContentHolder > div > .WaLayoutContainerFirst > .WaLayoutTable { max-width: var(--n11-max); margin: 0 auto; padding: 0 var(--n11-gutter); box-sizing: border-box; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaLayoutItem { height: calc(var(--n11-masthead) - 4px); vertical-align: middle; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaLayoutItem:first-child .WaLayoutPlaceHolder > div { display: flex; align-items: center; gap: var(--n11-s3); } #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaLayoutItem:nth-child(3) { text-align: center; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .n11-logo img { height: 52px; } /* nav row: the last layout (WA's own id_Header), full width between hairlines */ #idHeaderContentHolder > div > .WaLayoutContainerLast { position: relative; border-top: 1px solid var(--n11-line); border-bottom: 1px solid var(--n11-line); } #idHeaderContentHolder > div > .WaLayoutContainerLast > .WaLayoutTable { max-width: var(--n11-max); margin: 0 auto; padding: 0 var(--n11-gutter); box-sizing: border-box; } #idHeaderContentHolder > div > .WaLayoutContainerLast .WaLayoutItem { height: var(--n11-header); vertical-align: middle; } #idHeaderContentHolder > div > .WaLayoutContainerLast .WaGadgetMenuHorizontal .menuInner ul.firstLevel { gap: var(--n11-s2); } /* the docked logo + Join (copied in by theme.js) fade in once the masthead has scrolled away */ body.LayoutMain .n11-dock { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; } body.LayoutMain .n11-dock--logo { left: max(var(--n11-gutter), calc((100% - var(--n11-max)) / 2 + var(--n11-gutter))); } body.LayoutMain .n11-dock--join { right: max(var(--n11-gutter), calc((100% - var(--n11-max)) / 2 + var(--n11-gutter))); } body.LayoutMain .n11-dock .n11-logo img { height: 26px; } body.LayoutMain .n11-dock .n11-btn { height: 38px; padding: 0 16px; } html.n11-scrolled body.LayoutMain .n11-dock { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; } html.n11-scrolled #idHeaderContentHolder > div > .WaLayoutContainerLast { border-top-color: transparent; } /* logo */ body.LayoutMain .n11-logo { display: inline-flex; align-items: center; color: var(--n11-fg); line-height: 1; background: none; } body.LayoutMain .n11-logo img { display: block; height: 40px; width: auto; } /* horizontal menu (Kaleidoscope hides it; the theme brings it back) */ body.LayoutMain .WaGadgetMenuHorizontal { display: block; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner { background: transparent; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel { display: flex; justify-content: center; flex-wrap: nowrap; background: transparent; width: auto; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li { display: block; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a { height: auto; padding: 10px 13px; background: transparent; color: var(--n11-ink); } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a > span { height: auto; padding: 0; position: relative; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a > span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; width: auto; margin: 0; top: auto; border: 0; background: var(--n11-ink); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item:hover > a { background: transparent; color: var(--n11-ink); } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item:hover > a > span::after, body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a > span::after { transform: scaleX(1); } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a { color: var(--n11-ink); } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a > span::after { background: var(--n11-accent); } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a > span::before { content: '\f107'; display: inline-block; float: none; position: static; order: 2; margin: 0 0 0 6px; opacity: .55; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a > span { display: inline-flex; align-items: center; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul { top: calc(100% + 6px); margin: 0; padding: 8px; min-width: 230px; background: var(--n11-white); border: 1px solid var(--n11-line); border-radius: 8px; box-shadow: 0 18px 40px -20px rgba(20,32,25,.35); } body.LayoutMain .WaGadgetMenuHorizontal .menuInner li > .item:focus-within > ul { display: block; visibility: visible; width: auto; height: auto; overflow: visible; opacity: 1; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul::before { display: none; } /* invisible hover bridge over the 6px gap (and the 4px side gap of a third level), so the pointer never leaves the menu */ body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul ul::after { left: auto; right: 100%; top: 0; bottom: 0; width: 8px; height: auto; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul li > .item > a { padding: 10px 12px; background: transparent; color: var(--n11-ink); border-radius: 5px; white-space: nowrap; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul li > .item:hover > a { background: var(--n11-paper-2); color: var(--n11-ink); } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul li.sel > .item > a { color: var(--n11-accent); } body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul ul ul { top: -8px; left: 100%; margin-left: 4px; } body.LayoutMain .WaGadgetMenuHorizontal .menuInner .firstLevel > li.phantom { display: none; } /* header buttons: Log in · Join (a Content gadget, masthead right) */ body.LayoutMain .n11-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--n11-s3); margin: 0; } body.LayoutMain .n11-actions .n11-btn--secondary, body.LayoutMain .n11-actions .n11-btn:not(.n11-btn--text) { height: 44px; padding: 0 20px; } body.LayoutMain .n11-actions .n11-btn--text { gap: 8px; } /* site search gadget: a compact underlined field in the masthead */ body.LayoutMain .WaGadgetSiteSearch { display: block; margin: 0; } body.LayoutMain .WaGadgetSiteSearch .gadgetStyleBody { padding: 0; } body.LayoutMain .WaGadgetSiteSearch .searchBoxFieldContainer { position: relative; display: block; } body.LayoutMain .WaGadgetSiteSearch .searchBoxFieldContainer::before { content: '\f002'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--n11-ink-3); pointer-events: none; z-index: 1; } body.LayoutMain .WaGadgetSiteSearch .searchBoxField { height: 44px; width: 100%; max-width: 360px; padding: 0 16px 0 38px; border-radius: 999px; } #idHeaderContentHolder .WaGadgetSiteSearch .searchBoxField { height: 36px; width: 200px; padding: 0 0 0 26px; background: transparent; border: 0; border-bottom: 1px solid var(--n11-line); border-radius: 0; } #idHeaderContentHolder .WaGadgetSiteSearch .searchBoxFieldContainer::before { left: 0; } #idHeaderContentHolder .WaGadgetSiteSearch .searchBoxField:focus { border-bottom-color: var(--n11-ink); box-shadow: none; } #idHeaderContentHolder .WaGadgetSocialProfile.gadgetThemeStyle li a { width: 32px; height: 32px; border: 0; color: var(--n11-ink-2); } #idHeaderContentHolder .WaGadgetSocialProfile.gadgetThemeStyle li a:hover { color: var(--n11-accent); } #idHeaderContentHolder .WaGadgetSocialProfile ul { gap: 2px; } /* social profile gadget: Font Awesome brands in a round button */ body.LayoutMain .WaGadgetSocialProfile .gadgetStyleBody { padding: 0; } body.LayoutMain .WaGadgetSocialProfile ul, body.LayoutMain .WaGadgetSocialProfile.gadgetThemeStyle .orientationHorizontal { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; letter-spacing: 0; } body.LayoutMain .WaGadgetSocialProfile .alignRight { justify-content: flex-end; } body.LayoutMain .WaGadgetSocialProfile .orientationHorizontal::before { display: none; } body.LayoutMain .WaGadgetSocialProfile li, body.LayoutMain .WaGadgetSocialProfile.gadgetThemeStyle .orientationHorizontal li { margin: 0; padding: 0; } body.LayoutMain .WaGadgetSocialProfile a, body.LayoutMain .WaGadgetSocialProfile a:link, body.LayoutMain .WaGadgetSocialProfile.gadgetThemeStyle li a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--n11-rule); background: transparent; color: var(--n11-fg); overflow: hidden; text-indent: 0; line-height: 1; transition: border-color .2s ease, color .2s ease; } body.LayoutMain .WaGadgetSocialProfile a:hover, body.LayoutMain .WaGadgetSocialProfile.gadgetThemeStyle li a:hover { color: var(--n11-link); border-color: var(--n11-link); background: transparent; } body.LayoutMain .WaGadgetSocialProfile a::before, body.LayoutMain .WaGadgetSocialProfile.gadgetThemeStyle li a::before { position: static; display: block; width: auto; height: auto; margin: 0; text-align: center; } body.LayoutMain .WaGadgetSocialProfile a.Facebook::before { content: '\f39e'; } body.LayoutMain .WaGadgetSocialProfile a.LinkedIn::before { content: '\f0e1'; } body.LayoutMain .WaGadgetSocialProfile a.YouTube::before { content: '\f167'; } body.LayoutMain .WaGadgetSocialProfile a.Instagram::before { content: '\f16d'; } body.LayoutMain .WaGadgetSocialProfile a.Twitter::before { content: '\f099'; } body.LayoutMain .WaGadgetSocialProfile a.Blog::before, body.LayoutMain .WaGadgetSocialProfile a.RSS::before { content: '\f09e'; } /* X: Font Awesome 5 predates the X logo, so this one is a drawn mark (the only custom icon in the theme) */ body.LayoutMain .WaGadgetSocialProfile a.X::before, body.LayoutMain .WaGadgetSocialProfile.gadgetThemeStyle li a.X::before { content: ''; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3l-6.6 7.6L21.7 21h-6.1l-4.8-6.2L5.3 21h-3l7.1-8.1L2 3h6.3l4.3 5.7L17.5 3zm-1 16.2h1.7L7.6 4.7H5.8l10.7 14.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3l-6.6 7.6L21.7 21h-6.1l-4.8-6.2L5.3 21h-3l7.1-8.1L2 3h6.3l4.3 5.7L17.5 3zm-1 16.2h1.7L7.6 4.7H5.8l10.7 14.5z'/%3E%3C/svg%3E") center / contain no-repeat; } /* breadcrumbs gadget */ body.LayoutMain .WaGadgetBreadcrumbs { color: var(--n11-fg-3); margin: 0 0 var(--n11-s3); } body.LayoutMain .WaGadgetBreadcrumbs .gadgetStyleBody { padding: 0; } body.LayoutMain .WaGadgetBreadcrumbs a { color: var(--n11-fg-3); } body.LayoutMain .WaGadgetBreadcrumbs a:hover { color: var(--n11-link); } body.LayoutMain .WaGadgetBreadcrumbs .breadcrumbsSeparator { margin: 0 6px; } .zoneHeader2 .WaPlaceHolderHeader1 > div > .WaGadgetBreadcrumbs { padding-top: var(--n11-s5); margin-bottom: 0; } body.LayoutMain .n11-section .WaGadgetBreadcrumbs, body.LayoutMain .n11-crumbs { margin: 0 0 var(--n11-s3); color: var(--n11-fg-3); } body.LayoutMain .n11-crumbs a { color: var(--n11-fg-3); } body.LayoutMain .n11-crumbs a:hover { color: var(--n11-link); } /* ============================================================================= 6. MOBILE PANEL (WA's gadget becomes the whole header under 1080px) ============================================================================= */ .mobilePanelContainer { position: sticky; top: 0; z-index: 950; } body.LayoutMain .WaGadgetMobilePanel { display: none; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel { height: 64px; background: var(--n11-paper); box-shadow: inset 0 4px 0 var(--n11-ink); border-bottom: 1px solid var(--n11-line); color: var(--n11-ink); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--n11-logo-w); height: 32px; background: var(--n11-logo-url) center / contain no-repeat; pointer-events: none; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .mobilePanelButton { width: 64px; height: 64px; color: var(--n11-ink); text-indent: -9999px; background: transparent; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .mobilePanelButton::before { position: absolute; inset: 0; display: grid; place-items: center; text-indent: 0; transition: transform .25s ease; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .buttonMenu::before { content: '\f0c9'; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .buttonMenu.active::before { content: '\f00d'; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .buttonLogin::before { content: '\f007'; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .buttonAdmin::before { content: '\f013'; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .buttonAdmin { right: 64px; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .mobilePanelButton:active { background: transparent; color: var(--n11-accent); } /* the menu sheet */ body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--n11-paper); border: 0; padding: 0 0 var(--n11-s5); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel { background: transparent; border: 0; padding: var(--n11-s1) var(--n11-gutter); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li { border-bottom: 1px solid var(--n11-line); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li > .item > a { padding: 16px 0; color: var(--n11-ink); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.sel > .item > a { color: var(--n11-accent); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul ul { background: transparent; padding: 0 0 12px; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li > .item > a { padding: 7px 0 7px 16px; color: var(--n11-ink-2); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li.sel > .item > a { color: var(--n11-accent); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li.sel > .item > a::after { display: none; } /* search + Join / Donate / Log in, copied in by theme.js from the desktop header */ body.LayoutMain .n11-mobile-extras { padding: var(--n11-s3) var(--n11-gutter) var(--n11-s1); display: grid; gap: var(--n11-s2); } body.LayoutMain .n11-mobile-extras .n11-actions { justify-content: flex-start; flex-wrap: wrap; gap: 10px; } body.LayoutMain .n11-mobile-extras .n11-actions .n11-btn:not(.n11-btn--text) { height: 48px; flex: 1 1 auto; } body.LayoutMain .n11-mobile-extras .n11-actions .n11-btn--text { order: 3; flex: 1 0 100%; justify-content: flex-start; } body.LayoutMain .n11-mobile-extras .WaGadgetSiteSearch .searchBoxField { max-width: none; width: 100%; } body.LayoutMain .n11-mobile-extras .WaGadgetSiteSearch .searchBoxOuter, body.LayoutMain .n11-mobile-extras .WaGadgetSiteSearch .searchBox, body.LayoutMain .n11-mobile-extras .WaGadgetSiteSearch form { display: block; width: 100%; } body.LayoutMain .n11-mobile-social .WaGadgetSocialProfile ul { justify-content: flex-start; } body.LayoutMain .n11-mobile-social { padding: var(--n11-s3) var(--n11-gutter) 0; } /* the login sheet */ body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner { position: fixed; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; padding: var(--n11-s4) var(--n11-gutter); background: var(--n11-paper); border: 0; border-bottom: 1px solid var(--n11-line); color: var(--n11-ink); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginUserName, body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginPassword { margin: 0 0 12px; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginActionRememberMe { margin: 0 0 var(--n11-s2); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginActionRememberMe input.rememberMeCheckboxControl { position: static; visibility: visible; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton { width: 100%; max-width: none; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginPasswordForgot { margin: var(--n11-s2) 0 0; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .generalLoginBox a { color: var(--n11-ink-2); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .openAuthFormContainer { margin: 0 0 var(--n11-s3); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--n11-line); border-radius: 999px; background: var(--n11-white); overflow: visible; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginIcon { width: 16px; height: 16px; border-radius: 50%; background: var(--n11-highlight); } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginIcon::after { display: none; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginText { padding: 0; color: var(--n11-ink); } /* ============================================================================= 7. HERO — one layout, three media modes: Video (default) · Slideshow · Full photo. It is a --media section holding one or more slides; each slide = media + the same copy block (eyebrow, display headline, lead, buttons). ============================================================================= */ body.LayoutMain .n11-hero { --n11-hero-pb: clamp(48px, 8vh, 96px); /* space under the buttons; the controls sit on the same line */ display: grid; padding: 0; box-sizing: border-box; min-height: max(560px, calc(100vh - var(--n11-masthead) - var(--n11-header))); min-height: max(560px, min(calc(100svh - var(--n11-masthead) - var(--n11-header)), 980px)); } body.LayoutMain .n11-hero__slide { grid-area: 1 / 1; position: relative; isolation: isolate; display: flex; align-items: flex-end; padding: clamp(96px, 14vh, 200px) 0 var(--n11-hero-pb); visibility: hidden; z-index: 0; } body.LayoutMain .n11-hero__slide.is-active { visibility: visible; z-index: 2; } body.LayoutMain .n11-hero__slide.is-leaving { visibility: visible; z-index: 1; } body.LayoutMain .n11-hero .n11-media::after { background: linear-gradient(to top, color-mix(in srgb, var(--n11-ink) 88%, transparent) 0%, color-mix(in srgb, var(--n11-ink) 54%, transparent) 42%, color-mix(in srgb, var(--n11-ink) 14%, transparent) 78%, color-mix(in srgb, var(--n11-ink) 30%, transparent) 100%), linear-gradient(to right, color-mix(in srgb, var(--n11-ink) 62%, transparent) 0%, color-mix(in srgb, var(--n11-ink) 24%, transparent) 46%, transparent 74%); } body.LayoutMain .n11-hero__copy { position: relative; max-width: 960px; } body.LayoutMain .n11-hero__copy .n11-display { margin: 0 0 var(--n11-s4); max-width: 7.6em; color: var(--n11-fg); text-shadow: 0 2px 30px rgba(0,0,0,.18); } body.LayoutMain .n11-hero__copy .n11-lead { margin: 0; max-width: 32em; } body.LayoutMain .n11-hero__copy .n11-display em { font-style: italic; } /* controls: caption, slideshow arrows + dots, pause; bottom-right on the content edge */ body.LayoutMain .n11-hero__meta { grid-area: 1 / 1; align-self: end; justify-self: end; z-index: 3; position: relative; margin: 0 max(var(--n11-gutter), calc((100vw - var(--n11-max)) / 2 + var(--n11-gutter))) var(--n11-hero-pb) 0; display: flex; align-items: center; gap: 12px; } body.LayoutMain .n11-hero__meta .n11-caption { margin: 0 6px 0 0; max-width: 17em; text-align: right; } body.LayoutMain .n11-hero .n11-icon-btn { border-color: rgba(244,247,241,.42); background: color-mix(in srgb, var(--n11-ink) 30%, transparent); color: #F4F7F1; } body.LayoutMain .n11-hero .n11-icon-btn:hover { border-color: #F4F7F1; background: rgba(244,247,241,.14); color: #F4F7F1; } body.LayoutMain .n11-hero__toggle .fa-play, body.LayoutMain .n11-hero__toggle.is-paused .fa-pause { display: none; } body.LayoutMain .n11-hero__toggle.is-paused .fa-play { display: inline-block; } body.LayoutMain .n11-hero__dots { display: flex; gap: 2px; margin: 0 4px; } body.LayoutMain .n11-hero__dots button { width: 28px; height: 46px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; } body.LayoutMain .n11-hero__dots button::before { content: ''; width: 8px; height: 8px; border-radius: 99px; background: rgba(244,247,241,.5); transition: width .3s ease, background-color .3s ease; } body.LayoutMain .n11-hero__dots button[aria-current='true']::before { width: 22px; background: #F4F7F1; } /* entrance + slide change (theme.js adds html.n11-ready, then moves .is-active): the media wipes in left to right and settles; the headline rises line by line; the rest fades up */ html.n11-js .n11-hero .n11-media { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.65,0,.2,1); } html.n11-js .n11-hero .n11-media img, html.n11-js .n11-hero .n11-media video { transform: scale(1.1); transition: transform 9s cubic-bezier(.2,.7,.2,1); } html.n11-js .n11-hero .n11-media video { transition-duration: 2s; } html.n11-ready .n11-hero__slide.is-active .n11-media, .n11-hero__slide.is-leaving .n11-media { clip-path: inset(0); } html.n11-ready .n11-hero__slide.is-active .n11-media img, html.n11-ready .n11-hero__slide.is-active .n11-media video, .n11-hero__slide.is-leaving .n11-media img { transform: scale(1); } .n11-hero__slide.is-leaving .n11-media { transition: none; } body.LayoutMain .n11-hero__copy .n11-display .n11-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } html.n11-js .n11-hero__copy .n11-display .n11-line > span { display: block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.7,.2,1); } html.n11-ready .n11-hero__slide.is-active .n11-display .n11-line > span { transform: none; transition-delay: calc(.12s + var(--i, 0) * .09s); } html.n11-js .n11-hero__copy > :not(.n11-display), html.n11-js .n11-hero__meta { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } html.n11-ready .n11-hero__slide.is-active .n11-hero__copy > .n11-eyebrow { opacity: 1; transform: none; transition-delay: .05s; } html.n11-ready .n11-hero__slide.is-active .n11-hero__copy > .n11-lead { opacity: 1; transform: none; transition-delay: .5s; } html.n11-ready .n11-hero__slide.is-active .n11-hero__copy > .n11-row-btns { opacity: 1; transform: none; transition-delay: .62s; } html.n11-ready .n11-hero__meta { opacity: 1; transform: none; transition-delay: 1.1s; } .n11-hero__slide.is-leaving .n11-hero__copy { opacity: 0; transition: opacity .3s ease; } /* ============================================================================= 8. CARDS — four treatments ============================================================================= */ /* --- 8a. MEDIA CARD: photo, meta, h3 title, text, text button ----------------- */ body.LayoutMain .n11-card { display: flex; flex-direction: column; gap: var(--n11-s2); margin: 0; color: var(--n11-fg); text-decoration: none; background: none; } body.LayoutMain .n11-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--n11-radius); background: var(--n11-paper-2); } body.LayoutMain .n11-card--portrait .n11-card__img { aspect-ratio: 4 / 5; } body.LayoutMain .n11-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); } body.LayoutMain a.n11-card:hover .n11-card__img img { transform: scale(1.04); } body.LayoutMain .n11-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--n11-s1); } body.LayoutMain .n11-card__body > * { margin: 0; } body.LayoutMain .n11-card__body .n11-h3 { color: var(--n11-fg); transition: color .2s ease; } body.LayoutMain a.n11-card:hover .n11-h3 { color: var(--n11-link); } body.LayoutMain .n11-card__body .n11-body { color: var(--n11-fg-2); } body.LayoutMain .n11-card__body .n11-btn--text { margin-top: 4px; } /* --- 8b. TEXT CARD (tile): icon, h4, text, text button --------------------------- */ body.LayoutMain .n11-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--n11-s2); box-sizing: border-box; height: 100%; margin: 0; padding: var(--n11-s4); background: var(--n11-surface); border: 1px solid var(--n11-rule); border-radius: var(--n11-radius); color: var(--n11-fg); text-decoration: none; transition: border-color .2s ease; } body.LayoutMain .n11-tile > * { margin: 0; } body.LayoutMain .n11-tile .n11-body { color: var(--n11-fg-2); } body.LayoutMain .n11-tile > .n11-btn, body.LayoutMain .n11-tile > .n11-row-btns { margin-top: auto; } body.LayoutMain .n11-tile__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--n11-highlight); color: var(--n11-highlight-ink); } body.LayoutMain a.n11-tile:hover { border-color: var(--n11-link); } /* colour only: the dark tile (a featured membership level) */ body.LayoutMain .n11-tile--ink { --n11-fg: #F4F7F1; --n11-fg-2: rgba(244,247,241,.78); --n11-fg-3: rgba(244,247,241,.62); --n11-rule: rgba(244,247,241,.2); --n11-link: var(--n11-highlight); background: var(--n11-ink); border-color: var(--n11-ink); } body.LayoutMain .n11-tile .n11-tag { position: absolute; } body.LayoutMain .n11-tile { position: relative; } body.LayoutMain .n11-tag { top: var(--n11-s3); right: var(--n11-s3); padding: 5px 12px; border-radius: 999px; background: var(--n11-highlight); color: var(--n11-highlight-ink); } body.LayoutMain .n11-check { list-style: none; margin: 0; padding: 0; } body.LayoutMain .n11-check li { position: relative; padding-left: 28px; margin: 0 0 10px; color: var(--n11-fg); } body.LayoutMain .n11-check li::before { content: '\f00c'; position: absolute; left: 0; top: .45em; color: var(--n11-link); } body.LayoutMain .n11-tile .n11-check { width: 100%; padding-top: var(--n11-s3); border-top: 1px solid var(--n11-rule); flex: 1; } /* --- 8c. LIST ROW / TICKET: date stub, h3 title, caption meta, text button ------ */ body.LayoutMain .n11-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n11-fg); } body.LayoutMain .n11-rows > li { margin: 0; } body.LayoutMain .n11-row { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: var(--n11-s1) var(--n11-s3); padding: var(--n11-s3) 0; border-bottom: 1px solid var(--n11-rule); color: var(--n11-fg); text-decoration: none; background: none; } body.LayoutMain .n11-row--plain { grid-template-columns: minmax(0, 1fr) auto; } body.LayoutMain .n11-row > * { margin: 0; } body.LayoutMain .n11-row__stub { display: flex; flex-direction: column; align-self: stretch; justify-content: center; gap: 6px; padding-right: var(--n11-s3); border-right: 1px dashed var(--n11-rule); line-height: 1; } body.LayoutMain .n11-row__stub .n11-h2 { line-height: .9; } body.LayoutMain .n11-row__stub .n11-label { color: var(--n11-fg-2); } body.LayoutMain .n11-row__stub .n11-tile__icon { width: 56px; height: 56px; } body.LayoutMain .n11-row__main { display: flex; flex-direction: column; gap: 6px; } body.LayoutMain .n11-row__main > * { margin: 0; } body.LayoutMain .n11-row .n11-h3 { transition: color .2s ease; } body.LayoutMain a.n11-row:hover .n11-h3 { color: var(--n11-link); } body.LayoutMain .n11-meta { display: flex; flex-wrap: wrap; gap: 4px var(--n11-s3); color: var(--n11-fg-2); } body.LayoutMain .n11-meta span { display: inline-flex; align-items: center; gap: 8px; } body.LayoutMain .n11-meta i { color: var(--n11-fg-3); } body.LayoutMain .n11-row .n11-tag { position: static; display: inline-block; vertical-align: middle; margin-left: 10px; } /* the FAQ is a list of rows that open */ body.LayoutMain .n11-faq details { border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .n11-faq summary { list-style: none; cursor: pointer; padding: var(--n11-s3) var(--n11-s5) var(--n11-s3) 0; position: relative; color: var(--n11-fg); } body.LayoutMain .n11-faq summary::-webkit-details-marker { display: none; } body.LayoutMain .n11-faq summary::after { content: '\f067'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); transition: transform .3s ease; color: var(--n11-fg-2); } body.LayoutMain .n11-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } body.LayoutMain .n11-faq details > div { padding: 0 0 var(--n11-s3); max-width: 44em; color: var(--n11-fg-2); } /* --- 8d. STAT: an h1 number over a line of text ------------------------------- */ body.LayoutMain .n11-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--n11-s5) var(--n11-s4); } body.LayoutMain .n11-stat { margin: 0; padding: var(--n11-s3) 0 0; border-top: 1px solid var(--n11-fg); } body.LayoutMain .n11-stat > .n11-h1 { display: block; margin: 0 0 var(--n11-s1); font-variant-numeric: tabular-nums; color: var(--n11-fg); } body.LayoutMain .n11-stat > .n11-h1 sup { vertical-align: baseline; position: static; font: inherit; color: var(--n11-link); } body.LayoutMain .n11-stat > p { margin: 0; color: var(--n11-fg-2); max-width: 18em; } /* ============================================================================= 9. PATTERNS built from the parts above (layouts only, no new treatments) ============================================================================= */ /* photo stack (intro / mission): three photos that wipe in as it scrolls into view */ body.LayoutMain .n11-stack { position: relative; aspect-ratio: 5 / 5.2; margin: 0; } body.LayoutMain .n11-stack > span { position: absolute; overflow: hidden; border-radius: var(--n11-radius); background: var(--n11-paper-2); } body.LayoutMain .n11-stack img { width: 100%; height: 100%; object-fit: cover; display: block; } body.LayoutMain .n11-stack > span:nth-child(1) { right: 0; top: 0; width: 72%; height: 82%; z-index: 1; } body.LayoutMain .n11-stack > span:nth-child(2) { left: 0; bottom: 0; width: 50%; height: 44%; z-index: 2; box-shadow: 0 30px 60px -30px rgba(20,32,25,.45); } body.LayoutMain .n11-stack > span:nth-child(3) { left: 5%; top: 9%; width: 32%; height: 26%; z-index: 3; box-shadow: 0 20px 40px -24px rgba(20,32,25,.4); } body.LayoutMain .n11-stack figcaption { position: absolute; left: 56%; right: 0; top: calc(82% + 12px); text-align: right; } html.n11-js .n11-stack > span { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65,0,.2,1); } html.n11-js .n11-stack > span:nth-child(2) { clip-path: inset(100% 0 0 0); transition-delay: .25s; } html.n11-js .n11-stack > span:nth-child(3) { clip-path: inset(0 0 100% 0); transition-delay: .5s; } body.LayoutMain .n11-stack.is-in > span { clip-path: inset(0); } /* gallery: five photos in a mosaic */ body.LayoutMain .n11-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(110px, 11vw, 160px)); gap: 12px; margin: 0; } body.LayoutMain .n11-gallery > span { overflow: hidden; border-radius: var(--n11-radius); background: var(--n11-paper); } body.LayoutMain .n11-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; } body.LayoutMain .n11-gallery > span:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } body.LayoutMain .n11-gallery > span:nth-child(4) { grid-column: 1 / 2; } body.LayoutMain .n11-gallery > span:nth-child(5) { grid-column: 2 / 4; } /* figure: one photo with a caption */ body.LayoutMain .n11-figure { margin: 0; } body.LayoutMain .n11-figure img { width: 100%; border-radius: var(--n11-radius); display: block; } body.LayoutMain .n11-figure figcaption { margin: 10px 0 0; } /* rail: media cards scrolled sideways (drag, arrows, progress line) */ body.LayoutMain .n11-rail { position: relative; } body.LayoutMain .n11-rail__scroller { display: flex; gap: var(--n11-s3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px max(var(--n11-gutter), calc((100vw - var(--n11-max)) / 2 + var(--n11-gutter))) var(--n11-s3); scroll-padding-left: max(var(--n11-gutter), calc((100vw - var(--n11-max)) / 2 + var(--n11-gutter))); scrollbar-width: none; cursor: grab; } body.LayoutMain .n11-rail__scroller::-webkit-scrollbar { display: none; } body.LayoutMain .n11-rail__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; } body.LayoutMain .n11-rail__scroller.is-dragging a { pointer-events: none; } body.LayoutMain .n11-rail .n11-card { flex: 0 0 clamp(260px, 26vw, 340px); scroll-snap-align: start; } body.LayoutMain .n11-rail__foot { display: flex; align-items: center; gap: var(--n11-s3); margin-top: var(--n11-s1); } body.LayoutMain .n11-rail__bar { flex: 1; height: 1px; background: var(--n11-rule); position: relative; } body.LayoutMain .n11-rail__bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 20%; background: var(--n11-accent); transition: width .2s ease, left .2s ease; } body.LayoutMain .n11-rail__nav { display: flex; gap: var(--n11-s1); } /* logo marquee HOUSE RULE: the marquee never pauses: not on hover, not on focus, not for reduced motion. Do not add a pause. */ body.LayoutMain .n11-marquee { overflow: hidden; padding: var(--n11-s3) 0; border-top: 1px solid var(--n11-rule); border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .n11-marquee__track { display: flex; width: max-content; animation: n11-marquee 46s linear infinite; will-change: transform; } body.LayoutMain .n11-marquee__group { display: flex; align-items: center; gap: clamp(48px, 6vw, 96px); padding-right: clamp(48px, 6vw, 96px); flex: none; } body.LayoutMain .n11-marquee__group > * { white-space: nowrap; color: var(--n11-fg-2); margin: 0; } body.LayoutMain .n11-marquee__group img { height: 32px; width: auto; display: block; opacity: .8; filter: grayscale(1); } @keyframes n11-marquee { to { transform: translateX(-50%); } } /* contact list: label | value rows */ body.LayoutMain .n11-pairs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n11-fg); } body.LayoutMain .n11-pairs li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--n11-s2); margin: 0; padding: var(--n11-s2) 0; border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .n11-pairs li > :first-child { color: var(--n11-fg-3); padding-top: 3px; } body.LayoutMain .n11-pairs a { color: var(--n11-fg); } body.LayoutMain .n11-pairs a:hover { color: var(--n11-link); } body.LayoutMain .n11-map { aspect-ratio: 16 / 7; border-radius: var(--n11-radius); overflow: hidden; background: var(--n11-paper-2); margin-top: var(--n11-s5); } body.LayoutMain .n11-map img, body.LayoutMain .n11-map iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } /* the join band (zoneFooter1, every page): a --media section */ body.LayoutMain .n11-join .n11-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--n11-s4) var(--n11-s6); align-items: end; } body.LayoutMain .n11-join .n11-display { margin: 0; max-width: 9.5em; } body.LayoutMain .n11-join .n11-lead { margin: var(--n11-s3) 0 0; } body.LayoutMain .n11-join .n11-row-btns { margin: 0; } body.LayoutMain .n11-join { padding: calc(var(--n11-section) * 1.25) 0; } body.LayoutMain .n11-join .n11-media::after { background: linear-gradient(to right, color-mix(in srgb, var(--n11-ink) 84%, transparent) 0%, color-mix(in srgb, var(--n11-ink) 60%, transparent) 55%, color-mix(in srgb, var(--n11-ink) 40%, transparent) 100%); } /* ============================================================================= 10. WA SYSTEM GADGETS mapped onto the cards (no new treatments) ============================================================================= */ /* --- WA Upcoming events + Recent blog posts + Forum updates -> list rows ------ */ body.LayoutMain .WaGadgetUpcomingEvents .gadgetStyleBody, body.LayoutMain .WaGadgetRecentBlogPosts .gadgetStyleBody, body.LayoutMain .WaGadgetForumUpdates .gadgetStyleBody { padding: 0; } body.LayoutMain .WaGadgetUpcomingEvents ul, body.LayoutMain .WaGadgetRecentBlogPosts ul, body.LayoutMain .WaGadgetForumUpdates ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n11-fg); } body.LayoutMain .WaGadgetUpcomingEvents li, body.LayoutMain .WaGadgetRecentBlogPosts li, body.LayoutMain .WaGadgetForumUpdates li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: var(--n11-s3) 0; border-bottom: 1px solid var(--n11-rule); background: transparent; } body.LayoutMain .WaGadgetUpcomingEvents li .title a, body.LayoutMain .WaGadgetRecentBlogPosts li .title a, body.LayoutMain .WaGadgetForumUpdates li .title a { color: var(--n11-fg); transition: color .2s ease; } body.LayoutMain .WaGadgetUpcomingEvents li:hover .title a, body.LayoutMain .WaGadgetRecentBlogPosts li:hover .title a, body.LayoutMain .WaGadgetForumUpdates li:hover .title a { color: var(--n11-link); } body.LayoutMain .WaGadgetUpcomingEvents li .date, body.LayoutMain .WaGadgetRecentBlogPosts li .date, body.LayoutMain .WaGadgetForumUpdates li .date { color: var(--n11-fg-2); } body.LayoutMain .WaGadgetUpcomingEvents li .location, body.LayoutMain .WaGadgetRecentBlogPosts li .author, body.LayoutMain .WaGadgetForumUpdates li .author { color: var(--n11-fg-3); } body.LayoutMain .WaGadgetRecentBlogPosts li .title { order: 2; } body.LayoutMain .WaGadgetRecentBlogPosts li .date { order: 1; } body.LayoutMain .WaGadgetRecentBlogPosts li .author { order: 3; } body.LayoutMain .WaGadgetRecentBlogPosts li .author a { color: inherit; } body.LayoutMain .WaGadgetRecentBlogPosts ul li .date::after, body.LayoutMain .WaGadgetForumUpdates ul li .date::after, body.LayoutMain .WaGadgetUpcomingEvents li .date::after, body.LayoutMain .WaGadgetUpcomingEvents li .date::before, body.LayoutMain .WaGadgetUpcomingEvents li .location::after, body.LayoutMain .WaGadgetUpcomingEvents li .location::before { display: none; content: none; } /* --- WA Events list -> tickets (list rows with a date stub) ------------------- */ body.LayoutMain .WaGadgetEvents .rssFeedLabel, body.LayoutMain .WaGadgetBlog .rssFeedLabel { display: none; } body.LayoutMain .WaGadgetEvents .pageTitle.SystemPageTitle:empty { display: none; } body.LayoutMain .WaGadgetEvents .calendarModeIcon, body.LayoutMain .WaGadgetEvents .listModeIcon { display: none; } body.LayoutMain .WaGadgetEventsStateList h1.pageTitle { display: none; } body.LayoutMain .WaGadgetEventsStateList .sectionTitle { margin: 0 0 var(--n11-s3); } body.LayoutMain .WaGadgetEventsStateList .pageTitleOuterContainer { float: none; margin: 0 0 var(--n11-s3); display: flex; justify-content: flex-end; } body.LayoutMain .WaGadgetEventsStateList .pageTitleOuterContainer .pageViewSwitcherContainer a::before { display: none; } body.LayoutMain .WaGadgetEventsStateList .pageTitleOuterContainer .pageViewSwitcherContainer a { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 1px solid var(--n11-fg); border-radius: 999px; color: var(--n11-fg); } body.LayoutMain .WaGadgetEventsStateList .pageTitleOuterContainer .pageViewSwitcherContainer a:hover { border-color: var(--n11-link); color: var(--n11-link); } body.LayoutMain .WaGadgetEvents ul.boxesList { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n11-fg); } body.LayoutMain .WaGadgetEvents li.boxesListItem { margin: 0; padding: 0; } body.LayoutMain .WaGadgetEvents .boxOuterContainer, body.LayoutMain .WaGadgetEvents .boxContainer { background: transparent; border: 0; padding: 0; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem > .boxOuterContainer > .boxContainer > .inner { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-areas: 'info head foot' 'info body foot'; gap: 6px var(--n11-s3); align-items: start; padding: var(--n11-s3) 0; border-bottom: 1px solid var(--n11-rule); position: relative; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxHeaderOuterContainer { grid-area: head; margin: 0; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyOuterContainer, body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyContainer, body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyContainer > .inner { display: contents; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyInfoOuterContainer { grid-area: info; align-self: stretch; padding-right: var(--n11-s3); border-right: 1px dashed var(--n11-rule); } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyContentOuterContainer { grid-area: body; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxFooterOuterContainer { grid-area: foot; justify-self: end; align-self: center; } body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer h4.boxHeaderTitle { margin: 0; color: var(--n11-fg); white-space: normal; overflow: visible; text-overflow: clip; } body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxHeaderOuterContainer h4.boxHeaderTitle a { color: var(--n11-fg); text-decoration: none; transition: color .2s ease; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem:hover .boxHeaderOuterContainer h4.boxHeaderTitle a { color: var(--n11-link); } body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer::before { display: none; } body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer { float: none; width: auto; } body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer { margin: 0; padding: 0; background: transparent; border: 0; } body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxInfoContainer { margin: 0; } body.LayoutMain .WaGadgetEvents ul.boxInfo { list-style: none; margin: 0; padding: 0; } body.LayoutMain .WaGadgetEvents .boxInfoContainer ul.boxInfo li { margin: 0 0 4px; } body.LayoutMain .WaGadgetEvents .boxInfoContainer ul.boxInfo li > label { float: none; width: auto; text-align: left; } body.LayoutMain .WaGadgetEvents .boxInfoContainer ul.boxInfo li > div { margin: 0; overflow: visible; } body.LayoutMain .WaGadgetEventsStateList .boxBodyInfoOuterContainer .eventInfoBoxLabel { display: none; } body.LayoutMain .WaGadgetEventsStateList .boxBodyInfoOuterContainer .eventInfoBoxValue { color: var(--n11-fg-2); } body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyContentOuterContainer .boxBodyContentContainer.fixedHeight { max-height: none; overflow: visible; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyContentContainer { color: var(--n11-fg-2); } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyContentContainer p { margin: 0; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyContentContainer div:empty { display: none; } body.LayoutMain .WaGadgetEventsStateList .boxOuterContainer .boxFooterOuterContainer .boxFooterContainer a::before { display: none; } body.LayoutMain .WaGadgetEventsStateList .boxFooterContainer a { display: inline-flex; align-items: center; gap: 10px; color: var(--n11-fg); background: transparent; padding: 0; height: auto; border: 0; } body.LayoutMain .WaGadgetEventsStateList .boxFooterContainer a::after { content: '\f061'; transition: transform .25s ease; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem:hover .boxFooterContainer a { color: var(--n11-link); } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem:hover .boxFooterContainer a::after { transform: translateX(3px); } /* theme.js turns "October 14, 2026" into the ticket stub */ body.LayoutMain .WaGadgetEventsStateList .n11-stub { display: flex; flex-direction: column; gap: 6px; line-height: 1; } body.LayoutMain .WaGadgetEventsStateList .n11-stub .n11-h2 { line-height: .9; color: var(--n11-fg); } body.LayoutMain .WaGadgetEventsStateList .n11-stub__mon { color: var(--n11-fg-2); } body.LayoutMain .WaGadgetEventsStateList .n11-stub__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.LayoutMain .WaGadgetEventsStateList .eventInfoStartDate { margin-bottom: 10px !important; } body.LayoutMain .WaGadgetEventsStateList .eventInfoLocation { display: none; } /* past events */ body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer { margin: var(--n11-s6) 0 0; padding: 0; border-top: 0; } body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer h3.sectionTitle { margin: 0 0 var(--n11-s2); color: var(--n11-fg); } body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer .pastEventsList a.pastEventLink::before, body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer .pastEventsList td::before, body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer .pastEventsList tr::before, body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList td.left + td::before { display: none; content: none; } body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList { border-top: 1px solid var(--n11-fg); } body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList td.left { width: 200px; color: var(--n11-fg-3); padding: var(--n11-s2) var(--n11-s3) var(--n11-s2) 0; } body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList td.left + td { padding: var(--n11-s2) 0; } body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList a { color: var(--n11-fg); } body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList a:hover { color: var(--n11-link); } /* --- WA Event detail: reading column + a sticky registration tile ------------ */ body.LayoutMain .WaGadgetEventsStateDetails .pageTitleOuterContainer { margin: 0 0 var(--n11-s5); } body.LayoutMain .WaGadgetEventsStateDetails .pageTitleOuterContainer .pageBackContainer { float: none; margin: 0 0 var(--n11-s3); } body.LayoutMain .eventBackLink, body.LayoutMain .pageBackContainer a { color: var(--n11-fg-2); display: inline-flex; align-items: center; gap: 8px; } body.LayoutMain .WaGadgetEventsStateDetails .pageTitleOuterContainer .pageBackContainer a::before, body.LayoutMain .eventBackLink::before, body.LayoutMain .pageBackContainer a::before { content: '\f060'; } body.LayoutMain .WaGadgetEventsStateDetails .pageTitleOuterContainer .pageViewSwitcherOuterContainer { float: none; } body.LayoutMain .WaGadgetEventsStateDetails .pageTitleContainer h1.pageTitle { float: none; margin: 0; color: var(--n11-fg); max-width: 14em; } body.LayoutMain .WaGadgetEventsStateDetails > form > .boxOuterContainer > .boxContainer > .inner { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--n11-s5) var(--n11-s6); align-items: start; } body.LayoutMain .WaGadgetEventsStateDetails .boxBodyOuterContainer, body.LayoutMain .WaGadgetEventsStateDetails .boxBodyContainer, body.LayoutMain .WaGadgetEventsStateDetails .boxBodyContainer > .inner { display: contents; } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyOuterContainer::before { display: none; } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer { order: 2; float: none; width: auto; position: sticky; top: calc(var(--n11-header) + var(--n11-s3)); padding: var(--n11-s4); background: var(--n11-white); border: 1px solid var(--n11-line); border-radius: var(--n11-radius); } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyContentOuterContainer { order: 1; float: none; width: auto; margin: 0; } body.LayoutMain .WaGadgetEventsStateDetails .boxBodyContentContainer { max-height: none; overflow: visible; } body.LayoutMain .WaGadgetEventsStateDetails .boxBodyContentContainer img { border-radius: var(--n11-radius); margin: .4em 0; } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer { margin: 0; padding: 0; background: transparent; border: 0; } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .boxInfoContainer { margin: 0 0 var(--n11-s3); } body.LayoutMain .WaGadgetEventsStateDetails ul.boxInfo li { margin: 0 0 var(--n11-s2); } body.LayoutMain .WaGadgetEventsStateDetails .boxBodyInfoOuterContainer .eventInfoBoxLabel { display: block; } body.LayoutMain .WaGadgetEventsStateDetails .eventInfoBoxLabel { color: var(--n11-fg-3); margin: 0 0 4px; } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer h4.infoTitle { margin: 0 0 var(--n11-s2); color: var(--n11-fg-3); } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer ul.registrationInfo { list-style: none; margin: 0; padding: 0; } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer ul.registrationInfo li { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer ul.registrationInfo li::before { display: none; } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfoContainer ul.registrationInfo li div { color: var(--n11-fg-2); } body.LayoutMain .WaGadgetEventsStateDetails .regTypeHr, body.LayoutMain .WaGadgetEventsStateDetails .semantic-ui { display: none; } body.LayoutMain .WaGadgetEventsStateDetails .boxActionContainer { margin: var(--n11-s3) 0 0; } body.LayoutMain .WaGadgetEventsStateDetails .boxActionContainer input { width: 100%; } /* --- WA Blog: list -> list rows; post -> a reading column -------------------- */ body.LayoutMain .WaGadgetBlog .blogPagerContainer .inner { display: flex; gap: 8px; padding: 0 0 var(--n11-s3); } body.LayoutMain .WaGadgetBlog ul.boxesList { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n11-fg); } body.LayoutMain .WaGadgetBlog li.boxesListItem { margin: 0; padding: 0; } body.LayoutMain .WaGadgetBlog .boxOuterContainer, body.LayoutMain .WaGadgetBlog .boxContainer { background: transparent; border: 0; padding: 0; } body.LayoutMain .WaGadgetBlogStateList li.boxesListItem > .boxOuterContainer > .boxContainer > .inner { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-areas: 'meta head more' 'meta body more'; gap: 6px var(--n11-s3); align-items: start; padding: var(--n11-s3) 0; border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .WaGadgetBlogStateList .controlPanel { grid-area: more; align-self: center; position: static; } body.LayoutMain .WaGadgetBlogStateList .boxHeaderOuterContainer { grid-area: head; } body.LayoutMain .WaGadgetBlogStateList .boxBodyOuterContainer, body.LayoutMain .WaGadgetBlogStateList .boxBodyContainer, body.LayoutMain .WaGadgetBlogStateList .boxBodyContainer > .inner { display: contents; } body.LayoutMain .WaGadgetBlogStateList .boxBodyInfoOuterContainer { grid-area: meta; padding-top: 6px; } body.LayoutMain .WaGadgetBlogStateList .boxBodyContentOuterContainer { grid-area: body; } body.LayoutMain .WaGadgetBlog .controlPanel .toggleButton { display: none; } body.LayoutMain .WaGadgetBlog .controlPanel .controlPanelInner { position: static; height: auto; opacity: 1; overflow: visible; width: auto; display: flex; } body.LayoutMain .WaGadgetBlog .controlPanel .controlPanelInner a { display: inline-flex; align-items: center; gap: 10px; height: auto; padding: 0; background: transparent; color: var(--n11-fg); } body.LayoutMain .WaGadgetBlog .controlPanel .controlPanelInner a::before { display: none; } body.LayoutMain .WaGadgetBlog .controlPanel .controlPanelInner a.readMore::after { content: '\f061'; transition: transform .25s ease; } body.LayoutMain .WaGadgetBlog li.boxesListItem:hover .controlPanel .controlPanelInner a.readMore { color: var(--n11-link); } body.LayoutMain .WaGadgetBlog li.boxesListItem:hover .controlPanel .controlPanelInner a.readMore::after { transform: translateX(3px); } body.LayoutMain .WaGadgetBlog .controlPanel .controlPanelInner a + a { border: 0; margin-left: 20px; } body.LayoutMain .WaGadgetBlog .boxHeaderOuterContainer h4.boxHeaderTitle { margin: 0; color: var(--n11-fg); white-space: normal; overflow: visible; text-overflow: clip; } body.LayoutMain .WaGadgetBlog .boxHeaderOuterContainer h4.boxHeaderTitle a { color: var(--n11-fg); text-decoration: none; white-space: normal; transition: color .2s ease; } body.LayoutMain .WaGadgetBlog li.boxesListItem:hover .boxHeaderOuterContainer h4.boxHeaderTitle a { color: var(--n11-link); } body.LayoutMain .WaGadgetBlogStateList ul.boxesList li.boxesListItem .controlPanel ~ .boxBodyOuterContainer .boxBodyInfoOuterContainer, body.LayoutMain .WaGadgetBlog .blogEntryOuterContainer .controlPanel ~ .boxBodyOuterContainer .boxBodyInfoOuterContainer, body.LayoutMain .WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxBodyOuterContainer .boxBodyInfoOuterContainer, body.LayoutMain .WaGadgetBlog .blogEntryOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer { margin: 0; overflow: visible; } body.LayoutMain .WaGadgetBlogStateList ul.boxesList li.boxesListItem .controlPanel ~ .boxHeaderOuterContainer, body.LayoutMain .WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer, body.LayoutMain .WaGadgetBlog .blogEntryOuterContainer .controlPanel ~ .boxHeaderOuterContainer, body.LayoutMain .WaGadgetBlog .blogEntryOuterContainer .boxHeaderOuterContainer, body.LayoutMain .WaGadgetBlogStateList ul.boxesList li.boxesListItem .controlPanel ~ .boxBodyOuterContainer .boxBodyContentOuterContainer, body.LayoutMain .WaGadgetBlog .blogEntryOuterContainer .controlPanel ~ .boxBodyOuterContainer .boxBodyContentOuterContainer { margin: 0; padding: 0; } body.LayoutMain .WaGadgetBlog .boxBodyInfoOuterContainer h5 { visibility: visible; margin: 0; color: var(--n11-fg-3); } body.LayoutMain .WaGadgetBlog .boxBodyInfoOuterContainer .postedOn { display: inline; margin: 0; } body.LayoutMain .WaGadgetBlog .boxBodyInfoOuterContainer .postedOn::before { display: none; } body.LayoutMain .WaGadgetBlog .boxBodyInfoOuterContainer .postedByLabel, body.LayoutMain .WaGadgetBlog .boxBodyInfoOuterContainer .postedByLink { float: none; } body.LayoutMain .WaGadgetBlog .boxBodyInfoOuterContainer .postedByLink a { color: var(--n11-fg-2); } body.LayoutMain .WaGadgetBlog .postedByComment { display: none; } body.LayoutMain .WaGadgetBlogStateList .boxBodyContentContainer { color: var(--n11-fg-2); } body.LayoutMain .WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxBodyOuterContainer .boxBodyContentOuterContainer .boxBodyContentContainer.fixedHeight { max-height: none; overflow: visible; } body.LayoutMain .WaGadgetBlog .boxBodyContentContainer.fixedHeight.is-truncated::after { display: none; } body.LayoutMain .WaGadgetBlog .pageTitleOuterContainer { margin: 0 0 var(--n11-s4); } body.LayoutMain .WaGadgetBlog .pageTitleOuterContainer a::before { content: '\f060'; } body.LayoutMain .WaGadgetBlogStateDetails .blogEntryOuterContainer { max-width: 820px; } body.LayoutMain .WaGadgetBlogStateDetails .boxHeaderOuterContainer h4.boxHeaderTitle { max-width: 14em; margin: 0 0 var(--n11-s2); } body.LayoutMain .WaGadgetBlogStateDetails .boxBodyInfoOuterContainer { margin: 0 0 var(--n11-s4) !important; } body.LayoutMain .WaGadgetBlogStateDetails .boxBodyContentContainer p { margin: 0 0 1.2em; } body.LayoutMain .WaGadgetBlogStateDetails .boxBodyContentContainer img { border-radius: var(--n11-radius); margin: .4em 0; } body.LayoutMain .WaGadgetBlogStateList #idAddNewPostButtonContainer input[type=submit] { min-width: 0; } /* --- headline gadget, custom menu, vertical menu, slideshow gadget ----------- */ body.LayoutMain .WaGadgetHeadline .gadgetStyleBody { padding: 0; } body.LayoutMain .WaGadgetHeadline h1, body.LayoutMain .WaGadgetHeadline h2, body.LayoutMain .WaGadgetHeadline h3 { margin-bottom: .3em; } body.LayoutMain .WaGadgetCustomMenu ul { list-style: none; margin: 0; padding: 0; } body.LayoutMain .WaGadgetCustomMenu li { margin: 0; padding: 0; } body.LayoutMain .WaGadgetCustomMenu li::before, body.LayoutMain .WaGadgetCustomMenu li::after, body.LayoutMain .WaGadgetCustomMenu li a::before, body.LayoutMain .WaGadgetCustomMenu.menuStyleNone .orientationVertical li::before, body.LayoutMain .WaGadgetCustomMenu.menuStyleNone .orientationHorizontal li + li::before { display: none; content: none; } body.LayoutMain .WaGadgetCustomMenu .orientationVertical li a { display: block; padding: 10px 0; color: var(--n11-fg); border: 0; border-bottom: 1px solid var(--n11-rule); background: transparent; } body.LayoutMain .WaGadgetCustomMenu .orientationVertical li a:hover { color: var(--n11-link); } body.LayoutMain .WaGadgetCustomMenu .orientationHorizontal { display: flex; flex-wrap: wrap; gap: 4px 22px; } body.LayoutMain .WaGadgetCustomMenu .orientationHorizontal li a { color: var(--n11-fg); } body.LayoutMain .WaGadgetMenuVertical .menuInner ul.firstLevel { background: transparent; padding: 0; } body.LayoutMain .WaGadgetMenuVertical .menuInner ul.firstLevel > li > .item > a { background: transparent; color: var(--n11-fg); padding: 10px 0; border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .WaGadgetMenuVertical .menuInner ul.firstLevel > li.sel > .item > a, body.LayoutMain .WaGadgetMenuVertical .menuInner ul.firstLevel > li > .item:hover > a { background: transparent; color: var(--n11-accent); } body.LayoutMain .WaGadgetSlideshow .camera_wrap { border-radius: var(--n11-radius); overflow: hidden; } body.LayoutMain .WaGadgetSlideshow .camera_caption { background: linear-gradient(transparent, rgba(20,32,25,.7)); } body.LayoutMain .WaGadgetSlideshow .camera_caption > div { background: transparent; padding: var(--n11-s4); color: #F4F7F1; } body.LayoutMain .WaGadgetSlideshow .camera_pag_ul li { background: rgba(255,255,255,.5); } body.LayoutMain .WaGadgetSlideshow .camera_pag_ul li.cameracurrent { background: #fff; } /* ============================================================================= 11. FOOTER (zoneFooter2) — on ink ============================================================================= */ body.LayoutMain .n11-footer { padding-bottom: var(--n11-s4); } body.LayoutMain .n11-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--n11-s5) var(--n11-s4); padding: 0 0 var(--n11-s5); border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .n11-footer__brand .n11-logo img { height: 38px; } body.LayoutMain .n11-footer__brand p { margin: var(--n11-s3) 0 0; color: var(--n11-fg-2); max-width: 24em; } body.LayoutMain .n11-footer .n11-h6 { color: var(--n11-fg-3); margin: 0 0 var(--n11-s2); } body.LayoutMain .n11-footer ul { list-style: none; margin: 0; padding: 0; } body.LayoutMain .n11-footer li { margin: 0 0 10px; } body.LayoutMain .n11-footer li a, body.LayoutMain .n11-footer address a { color: var(--n11-fg); transition: color .2s ease; } body.LayoutMain .n11-footer li a:hover, body.LayoutMain .n11-footer address a:hover { color: var(--n11-link); } body.LayoutMain .n11-footer address { font-style: normal; color: var(--n11-fg-2); } body.LayoutMain .n11-footer__social { margin-top: var(--n11-s3); } body.LayoutMain .n11-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px var(--n11-s3); padding: var(--n11-s3) 0 0; color: var(--n11-fg-3); } body.LayoutMain .n11-footer__bottom > * { margin: 0; } body.LayoutMain .n11-footer__bottom a { color: var(--n11-fg-2); } body.LayoutMain .n11-footer__bottom a:hover { color: var(--n11-fg); } .zoneFooter2 .WaGadgetContent .gadgetStyleBody { padding: 0; } /* "Launched by Nicasio LLC" (theme demo site only): the footer's first row */ body.LayoutMain .n11-launch { padding-bottom: 0; } body.LayoutMain .n11-launch .n11-wrap { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--n11-s3) var(--n11-s4); padding-bottom: var(--n11-s5); } body.LayoutMain .n11-launch .n11-wrap::after { content: ''; grid-column: 1 / -1; height: 1px; background: var(--n11-rule); margin-top: var(--n11-s2); } body.LayoutMain .n11-launch img { width: 56px; height: auto; display: block; } body.LayoutMain .n11-launch p { margin: 0; } body.LayoutMain .n11-launch .n11-h3 { color: var(--n11-fg); margin-bottom: 6px; } body.LayoutMain .n11-launch .n11-body { color: var(--n11-fg-2); } body.LayoutMain .n11-launch .n11-body a { color: var(--n11-fg); } body.LayoutMain [class*='WaGadget']:has(.n11-launch) + [class*='WaGadget'] .n11-footer { padding-top: var(--n11-s5); } /* ============================================================================= 12. DEMO-PAGE HELPERS (Typography and Gadgets pages) ============================================================================= */ body.LayoutMain .n11-specimen { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--n11-s1) var(--n11-s4); align-items: baseline; padding: var(--n11-s3) 0; border-bottom: 1px solid var(--n11-rule); } body.LayoutMain .n11-specimen > div:first-child { display: flex; flex-direction: column; gap: 2px; } body.LayoutMain .n11-specimen > div:first-child .n11-caption { color: var(--n11-fg-3); } body.LayoutMain .n11-specimen > * > *, body.LayoutMain .n11-specimen > * { margin: 0; } body.LayoutMain .n11-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--n11-s2); margin: 0; padding: 0; list-style: none; } body.LayoutMain .n11-swatches li { margin: 0; display: flex; flex-direction: column; gap: 2px; } body.LayoutMain .n11-swatches i { display: block; aspect-ratio: 1.6; border-radius: var(--n11-radius); border: 1px solid var(--n11-line); margin: 0 0 8px; } body.LayoutMain .n11-spacing { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } body.LayoutMain .n11-spacing li { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: var(--n11-s4); margin: 0; } body.LayoutMain .n11-spacing i { display: block; height: 14px; background: var(--n11-highlight); border-left: 2px solid var(--n11-highlight-ink); } body.LayoutMain .n11-panel { padding: var(--n11-s4); border-radius: var(--n11-radius); } body.LayoutMain .n11-demo-sections { display: grid; gap: 0; border-radius: var(--n11-radius); overflow: hidden; border: 1px solid var(--n11-line); } body.LayoutMain .n11-demo-sections > .n11-section { padding: var(--n11-s5) var(--n11-s4); } /* ============================================================================= 13. RESPONSIVE ============================================================================= */ @media (max-width: 1240px) { body.LayoutMain .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a { padding: 10px 9px; } body.LayoutMain .n11-actions { gap: var(--n11-s2); } } @media (max-width: 1080px) { /* WA's mobile panel becomes the header */ body.LayoutMain .WaGadgetMobilePanel { display: block; } .zoneHeader1 { display: none; } :root { --n11-header: 64px; --n11-masthead: 0px; } } @media (max-width: 960px) { body.LayoutMain .n11-grid, body.LayoutMain .n11-grid--4 { --cols: 2; } body.LayoutMain .n11-split { grid-template-columns: 1fr; } body.LayoutMain .n11-head { grid-template-columns: 1fr; } body.LayoutMain .n11-head > .n11-btn { justify-self: start; } body.LayoutMain .n11-join .n11-wrap { grid-template-columns: 1fr; align-items: start; } body.LayoutMain .n11-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.LayoutMain .n11-footer__brand { grid-column: 1 / -1; } body.LayoutMain .n11-hero__meta { align-self: start; margin-top: var(--n11-s3); margin-bottom: 0; } body.LayoutMain .n11-hero__meta .n11-caption, body.LayoutMain .n11-hero__prev, body.LayoutMain .n11-hero__next { display: none; } body.LayoutMain .WaGadgetEventsStateDetails > form > .boxOuterContainer > .boxContainer > .inner { grid-template-columns: 1fr; } body.LayoutMain .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer { position: static; order: 0; } body.LayoutMain .WaGadgetBlogStateList li.boxesListItem > .boxOuterContainer > .boxContainer > .inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'meta' 'head' 'body' 'more'; } body.LayoutMain .WaGadgetBlogStateList .controlPanel { align-self: start; margin-top: 6px; } body.LayoutMain .n11-launch .n11-wrap { grid-template-columns: 48px minmax(0, 1fr); } body.LayoutMain .n11-launch .n11-wrap > .n11-btn { grid-column: 1 / -1; justify-self: start; } body.LayoutMain .n11-launch img { width: 48px; height: auto; } } @media (max-width: 600px) { :root { --n11-gutter: 20px; --n11-body-size: 16px; --n11-label-size: 15px; --n11-h4-size: 19px; } body.LayoutMain .n11-grid, body.LayoutMain .n11-grid--2, body.LayoutMain .n11-grid--4 { --cols: 1; } body.LayoutMain .n11-grid--4.n11-grid--keep { --cols: 2; gap: var(--n11-s4) var(--n11-s2); } body.LayoutMain .n11-stats { gap: var(--n11-s4) var(--n11-s3); } body.LayoutMain .n11-form { grid-template-columns: 1fr; } body.LayoutMain .n11-row { grid-template-columns: 76px minmax(0, 1fr); padding: 20px 0; } body.LayoutMain .n11-row--plain { grid-template-columns: minmax(0, 1fr); } body.LayoutMain .n11-row > .n11-btn--text { grid-column: 2; justify-self: start; } body.LayoutMain .n11-row--plain > .n11-btn--text { grid-column: 1; } body.LayoutMain .n11-row__stub { padding-right: var(--n11-s2); } body.LayoutMain .n11-row__stub .n11-tile__icon { width: 44px; height: 44px; } body.LayoutMain .n11-row .n11-tag { display: none; } body.LayoutMain .n11-pairs li { grid-template-columns: 90px minmax(0, 1fr); } body.LayoutMain .n11-footer__grid { grid-template-columns: 1fr; gap: var(--n11-s4); } body.LayoutMain .n11-footer__bottom { flex-direction: column; } body.LayoutMain .n11-specimen, body.LayoutMain .n11-spacing li { grid-template-columns: 1fr; gap: 6px; } body.LayoutMain .n11-tile { padding: var(--n11-s3); } body.LayoutMain .n11-stack figcaption { display: none; } body.LayoutMain .n11-hero { --n11-hero-pb: 40px; } body.LayoutMain .n11-hero__slide { padding-top: 140px; } body.LayoutMain .n11-hero__copy .n11-display { margin-bottom: var(--n11-s3); max-width: none; } body.LayoutMain .n11-hero__copy .n11-row-btns { margin-top: var(--n11-s3); gap: 14px 22px; } body.LayoutMain .n11-hero__meta { margin-top: 14px; } body.LayoutMain .n11-join .n11-display { max-width: none; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem > .boxOuterContainer > .boxContainer > .inner { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: 'info head' 'info body' 'info foot'; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxFooterOuterContainer { justify-self: start; margin-top: 8px; } body.LayoutMain .WaGadgetEventsStateList li.boxesListItem .boxBodyInfoOuterContainer { padding-right: var(--n11-s2); } body.LayoutMain .WaGadgetEventsStateList .eventInfoStartTime { display: none; } body.LayoutMain .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList td.left { width: 120px; } } /* ============================================================================= 14. REDUCED MOTION — everything stops EXCEPT the logo marquee (house rule: marquees never pause; it is decorative and cannot take focus). ============================================================================= */ @media (prefers-reduced-motion: reduce) { html.n11-js .n11-hero .n11-media, html.n11-js .n11-stack > span { clip-path: none; transition: none; } html.n11-js .n11-hero .n11-media img, html.n11-js .n11-hero .n11-media video { transform: none; transition: none; } html.n11-js .n11-hero__copy .n11-display .n11-line > span, body.LayoutMain .n11-reveal .n11-line > span { transform: none; transition: none; } html.n11-js .n11-hero__copy > :not(.n11-display), html.n11-js .n11-hero__meta, html.n11-js .n11-fade { opacity: 1; transform: none; transition: none; } html.n11-js .n11-hero__slide { transition: none; } .n11-hero__slide.is-leaving { visibility: hidden; } body.LayoutMain .n11-card__img img, .zoneHeader1 { transition: none; } /* .n11-marquee__track keeps animating on purpose */ } /* ============================================================================= 15. ADMIN / EDIT MODE — everything visible and static; slides stacked ============================================================================= */ .pageModeEdit .n11-hero { display: block; min-height: 0; } .pageModeEdit .n11-hero__slide { visibility: visible; min-height: 480px; } .pageModeEdit .n11-hero .n11-media, .pageModeEdit .n11-stack > span { clip-path: none; } .pageModeEdit .n11-hero__copy > *, .pageModeEdit .n11-fade, .pageModeEdit .n11-hero__meta { opacity: 1; transform: none; } .pageModeEdit .n11-reveal .n11-line > span, .pageModeEdit .n11-display .n11-line > span { transform: none; } .pageModeEdit .zoneHeader1, .pageModeEdit .mobilePanelContainer { position: relative; top: 0; } .pageModeEdit .n11-marquee__track { animation: none; }