/* ========================================================================== Chagrin Falls Booster Club: concept v2 theme for Wild Apricot (Casefile) Paste into Website › CSS. Source of truth: wa-theme/v2.css in git. Design reference: netlify/site/v2/index.html Palette: black, white, Chagrin orange. Nothing else. Breakpoints follow Casefile: 991px (mid), 767px (phone; mobile panel). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Figtree:wght@400;500;600;700&display=swap'); :root { --cf-ink: #141210; --cf-paper: #FFFFFF; --cf-soft: #F6F4F1; --cf-rule: #E4E0DA; --cf-mut: #6B6560; --cf-body: #3F3B37; --cf-orange: #E8601C; /* fills, bars, large numerals */ --cf-link: #C24E0E; /* same hue, darkened for text contrast (4.8:1) */ --cf-foot-link: #F6B48F; --cf-head: Archivo, "Helvetica Neue", Arial, sans-serif; --cf-text: Figtree, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---------- base ---------- */ html body { background: var(--cf-paper) !important; color: var(--cf-ink); font: 17px/1.6 var(--cf-text) !important; } body, body p, body li, body td, body input, body select, body textarea, body button, body .gadgetStyleBody, body .WaGadgetContent .gadgetContentEditableArea { font-family: var(--cf-text); } body .gadgetContentEditableArea, body .gadgetContentEditableArea p, body .gadgetContentEditableArea li, body .gadgetContentEditableArea td { color: var(--cf-ink); font-size: 17px; line-height: 1.6; } body h1, body h2, body h3, body h4, body .gadgetContentEditableArea h1, body .gadgetContentEditableArea h2, body .gadgetContentEditableArea h3, body .gadgetContentEditableArea h4, body .gadgetStyleTitle h4, body .gadgetStyleTitle { font-family: var(--cf-head) !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: -.015em; line-height: 1.1 !important; color: var(--cf-ink) !important; text-transform: none !important; text-wrap: balance; } body h1, body .gadgetContentEditableArea h1 { font-size: clamp(34px, 4.6vw, 54px) !important; margin: 0 0 .4em; } body h2, body .gadgetContentEditableArea h2 { font-size: clamp(26px, 3.2vw, 38px) !important; margin: 0 0 .5em; } body h3, body .gadgetContentEditableArea h3 { font-size: 21px !important; margin: 0 0 .4em; } body h4, body .gadgetContentEditableArea h4, body .gadgetStyleTitle h4 { font-size: 18px !important; margin: 0 0 .4em; } body a, body a:link, body a:visited, body .gadgetContentEditableArea a:not(.cf-btn):not([class*="buttonStyle"]) { color: var(--cf-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } body a:hover, body .gadgetContentEditableArea a:not(.cf-btn):hover { color: var(--cf-ink); } body ::selection { background: #FBD5BF; } body :focus-visible { outline: 2px solid var(--cf-link); outline-offset: 2px; } /* content width: 1040px of text inside 48px gutters, like v2 */ body .WaPlaceHolder > div { max-width: 1136px; padding-left: 48px; padding-right: 48px; } body .WaPlaceHolderWide > div { max-width: none; padding-left: 0; padding-right: 0; } /* Theme placeholders ship with photo backgrounds; v2 is plain white */ body [class*="WaPlaceHolderContent"], body .WaPlaceHolderHeader, body .WaPlaceHolderHeader1, body .WaPlaceHolderHeader2, body .zoneContent, body .zoneHeader2, body .zoneHeader3 { background-image: none !important; background-color: transparent !important; } /* ---------- header ---------- */ body .zoneHeader1 { position: sticky; top: 0; z-index: 900; background: var(--cf-paper) !important; /* opaque: content scrolls under it */ border-top: 4px solid var(--cf-orange); border-bottom: 1px solid var(--cf-ink); } body .WaPlaceHolderHeader { min-height: 0 !important; } body .WaPlaceHolderHeader > div { padding-top: 14px; padding-bottom: 14px; } body .WaPlaceHolderHeader .WaLayoutTable td { vertical-align: middle; } body .zoneHeader2 .WaPlaceHolder > div:empty { display: none; } /* header row = brand | menu | log in + Join; size cells to content, not WA's fixed % */ body .WaPlaceHolderHeader .WaLayoutTable { width: 100%; table-layout: auto; } body .WaPlaceHolderHeader td.WaLayoutItem { width: auto !important; } body .WaPlaceHolderHeader td.WaLayoutItem:first-child, body .WaPlaceHolderHeader td.WaLayoutItem:last-child { width: 1% !important; white-space: nowrap; } body .WaPlaceHolderHeader td.WaLayoutSeparator { width: 24px !important; } body .WaPlaceHolderHeader td.WaLayoutItem:last-child .placeHolderContainer > div { display: flex; align-items: center; gap: 14px; } body .WaPlaceHolderHeader [class*="WaGadget"] { margin-bottom: 0 !important; } body .WaPlaceHolderHeader .WaGadgetMenuHorizontal .menuInner ul.firstLevel { margin-left: auto; } /* brand block (Content gadget with .cf-brand markup) */ .cf-brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--cf-ink) !important; } .cf-brand img { width: 48px; height: 48px; object-fit: contain; flex: none; } /* base mark (orange CF circle); the tiger block below overrides it */ .cf-mark { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--cf-orange); color: var(--cf-ink); display: flex; align-items: center; justify-content: center; font: 800 16px/1 var(--cf-head); letter-spacing: -.02em; } /* Tiger mark replaces the CF circle (board approved 2026-10-24). The image is inline (5 KB PNG, source assets/tiger-mark-css.png), so no file upload or header markup change is needed. */ .cf-mark { width: 68px; height: 52px; border-radius: 0; font-size: 0 !important; color: transparent; background: url("data:image/png;base64,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") center / contain no-repeat; } body .WaPlaceHolderHeader .WaGadgetContent { height: auto !important; margin: 0 !important; } body .WaPlaceHolderHeader .gadgetContentEditableArea p { margin: 0; } .cf-brand b, .cf-brand strong { display: block; font: 800 19px/1.1 var(--cf-head); letter-spacing: -.01em; color: var(--cf-ink); } .cf-brand small { display: block; font-size: 12.5px; color: var(--cf-mut); margin-top: 2px; line-height: 1.3; } /* main menu */ body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a { height: auto !important; padding: 10px 12px !important; color: var(--cf-ink) !important; font: 600 15px/1.4 var(--cf-text) !important; text-transform: none !important; text-decoration: none !important; } body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a > span { height: auto !important; } body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item:hover > a, body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a { color: var(--cf-link) !important; } body .WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.dir > .item > a span:after { height: auto; font-size: 15px; line-height: inherit; content: '\f107'; margin-left: 5px; color: var(--cf-mut); } body .WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.dir > .item:hover > a span:after, body .WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.dir > .item > a:hover span:after { transform: none; color: var(--cf-link); } body .WaGadgetMenuHorizontal .menuInner ul ul { border: 1px solid var(--cf-ink) !important; border-top: 3px solid var(--cf-orange) !important; border-radius: 0 0 6px 6px; padding: 6px 0 !important; box-shadow: 0 10px 24px rgba(20,18,16,.10); } body .WaGadgetMenuHorizontal .menuInner ul ul li > .item > a { color: var(--cf-ink) !important; font: 500 15px/1.4 var(--cf-text) !important; padding: 8px 18px !important; text-decoration: none !important; } body .WaGadgetMenuHorizontal .menuInner ul ul li > .item:hover > a, body .WaGadgetMenuHorizontal .menuInner ul ul li.sel > .item > a { color: var(--cf-link) !important; background: var(--cf-soft) !important; } body .WaGadgetMenuHorizontal .stickyMenu.active { background: var(--cf-paper) !important; border-bottom: 1px solid var(--cf-ink) !important; } /* header login: signed out = quiet "Log in" text link; signed in = round account icon + menu */ body .WaGadgetLoginButton .loginContainer:not(.authenticated) .loginLink { min-width: 0 !important; padding: 10px 4px !important; background: transparent !important; color: var(--cf-ink) !important; font: 600 15px/1.4 var(--cf-text) !important; text-transform: none !important; text-decoration: none !important; } body .WaGadgetLoginButton .loginContainer:not(.authenticated) .loginLink:hover { color: var(--cf-link) !important; } body .WaGadgetLoginButton .loginContainer.authenticated .loginLink { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50%; background: var(--cf-soft) !important; color: var(--cf-ink) !important; cursor: pointer; } body .WaGadgetLoginButton .loginContainer.authenticated .loginLink:before { font-size: 20px !important; line-height: 40px !important; color: var(--cf-ink); } body .WaGadgetLoginButton .loginContainer.authenticated .loginLink:hover { background: var(--cf-ink) !important; } body .WaGadgetLoginButton .loginContainer.authenticated .loginLink:hover:before { color: #fff; } body .WaGadgetLoginButton .loginPanel { top: 52px !important; border: 1px solid var(--cf-ink) !important; border-top: 3px solid var(--cf-orange) !important; border-radius: 0 0 6px 6px; box-shadow: 0 10px 24px rgba(20,18,16,.10); font: 400 15px/1.5 var(--cf-text); white-space: normal; } body .WaGadgetLoginButton .loginPanel:before, body .WaGadgetLoginButton .loginPanel:after { display: none; } body .WaGadgetLoginButton .loginPanel .loggedName { font-weight: 700; } body .WaGadgetLoginButton .loginPanel a, body .WaGadgetLoginButton .loginPanel .loginBoxLogout { color: var(--cf-link) !important; font: 600 15px/1.5 var(--cf-text) !important; background: none !important; border: 0 !important; min-height: 0 !important; padding: 0 !important; display: inline !important; border-radius: 0 !important; } /* Home stays first in WA's menu; the club name already links home */ body .WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li:first-child { display: none; } /* ---------- buttons ---------- */ .cf-btn, a.cf-btn, a.cf-btn:link, a.cf-btn:visited, body a[class*="buttonStyle"], body a[class*="buttonStyle"]:link, body input[type="submit"], body input[type="button"], body button.button, body .typeButton, body .formButton, body .WaGadget .actionButton, body .loginAction input, body .navigationButton input { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; min-width: 0 !important; padding: 0 24px !important; border: 2px solid var(--cf-orange) !important; border-radius: 999px !important; background: var(--cf-orange) !important; color: var(--cf-ink) !important; font: 700 16px/1 var(--cf-text) !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap; box-shadow: none !important; cursor: pointer; transition: background .15s, color .15s, border-color .15s; -webkit-appearance: none; appearance: none; } .cf-btn:hover, body a[class*="buttonStyle"]:hover, body input[type="submit"]:hover, body input[type="button"]:hover, body button.button:hover, body .typeButton:hover, body .loginAction input:hover { background: var(--cf-ink) !important; border-color: var(--cf-ink) !important; color: #fff !important; } .cf-btn.cf-line, a.cf-btn.cf-line { background: transparent !important; border-color: var(--cf-ink) !important; color: var(--cf-ink) !important; } .cf-btn.cf-line:hover { background: var(--cf-ink) !important; color: #fff !important; } .cf-btn.cf-sm, a.cf-btn.cf-sm { min-height: 42px; padding: 0 18px !important; font-size: 15px !important; } .cf-btn.cf-block { width: 100%; } /* ---------- CTA hierarchy (one primary per section) ---------- Primary = .cf-btn (solid orange pill) the action we most want Secondary = .cf-btn.cf-line (ink outline pill) an important alternative Tertiary = .cf-more / a.cf-tert (text + arrow) details, browse, "more" WA form buttons all share .nextButton, so rank them by their label. */ .cf-more, a.cf-tert, body a.cf-tert:link, body a.cf-tert:visited, body .gadgetContentEditableArea a.cf-more { display: inline-flex; align-items: center; gap: 6px; font: 700 15.5px/1.3 var(--cf-text) !important; color: var(--cf-link) !important; text-decoration: none !important; white-space: nowrap; } .cf-more:hover, a.cf-tert:hover { color: var(--cf-ink) !important; text-decoration: underline !important; text-underline-offset: 4px; } body input[type="submit"][value="Back"], body input[type="button"][value="Back"], body input[type="submit"][value="Previous"], body input[type="button"][value="Previous"] { background: transparent !important; border-color: var(--cf-ink) !important; color: var(--cf-ink) !important; } body input[type="submit"][value="Back"]:hover, body input[type="button"][value="Back"]:hover { background: var(--cf-ink) !important; color: #fff !important; } body input[type="submit"][value^="Cancel"], body input[type="button"][value^="Cancel"], body input.deleteButton, body input[value="Remove"] { background: transparent !important; border-color: transparent !important; color: var(--cf-link) !important; padding: 0 8px !important; min-height: 50px; text-decoration: underline !important; } body input[type="submit"][value^="Cancel"]:hover, body input[type="button"][value^="Cancel"]:hover { background: transparent !important; border-color: transparent !important; color: var(--cf-ink) !important; } /* WA hides step-specific buttons with .hidden; the pill rule above must not resurrect them */ body input.hidden, body .hidden input[type="submit"], body .hidden input[type="button"] { display: none !important; } /* ---------- forms (system pages: join, renew, checkout, events) ---------- */ body input[type="text"], body input[type="email"], body input[type="password"], body input[type="tel"], body input[type="number"], body input[type="search"], body select, body textarea { border: 1px solid #BDB6AE !important; border-radius: 6px !important; background: #fff !important; color: var(--cf-ink) !important; font: 400 16px/1.4 var(--cf-text) !important; padding: 10px 12px !important; box-shadow: none !important; min-height: 44px; box-sizing: border-box; } body input:focus, body select:focus, body textarea:focus { border-color: var(--cf-ink) !important; outline: 2px solid var(--cf-orange); outline-offset: 0; } body .fieldLabel, body .fieldLabel label, body label { color: var(--cf-ink); font-family: var(--cf-text); } body .mandatorySymbol, body .mandatory { color: var(--cf-link) !important; } body .infoBlock, body .generalFieldsContainer .fieldSubContainer { font-family: var(--cf-text); } /* tables in content */ body .gadgetContentEditableArea table { border-collapse: collapse; } body .gadgetContentEditableArea table td, body .gadgetContentEditableArea table th { border-color: var(--cf-rule); } /* ---------- gadget titles (Upcoming events etc.) ---------- */ body .gadgetStyleTitle { background: none !important; border: 0 !important; padding: 0 0 10px !important; } /* ---------- v2 components (use inside Content gadgets) ---------- */ .cf-eyebrow { display: block; font: 700 13px/1.3 var(--cf-text); letter-spacing: .1em; text-transform: uppercase; color: var(--cf-link); margin: 0 0 10px; } .cf-lede, .gadgetContentEditableArea p.cf-lede { font-size: 18px !important; color: var(--cf-body) !important; max-width: 34em; } .cf-mut, .gadgetContentEditableArea .cf-mut { color: var(--cf-mut) !important; } .cf-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .cf-more { font-weight: 600; white-space: nowrap; } .cf-hdr { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } .cf-hdr h2 { margin: 0 !important; } .cf-pending { background: #FFF1E8; border-bottom: 1px dashed var(--cf-link); padding: 0 3px; } /* section rhythm: a page section = WA layout with class cf-section */ .cf-section { border-top: 1px solid var(--cf-rule); padding-top: 72px !important; padding-bottom: 72px !important; } .cf-section-first { padding-top: 64px !important; padding-bottom: 56px !important; } /* hero */ .cf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .cf-hero h1 { margin: 0 !important; } .cf-hero .cf-lede { margin-top: 18px; } .cf-photo img, img.cf-photo { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; } .cf-drive { margin-top: 30px; max-width: 26em; } .cf-drive p { font-size: 15px !important; display: flex; justify-content: space-between; gap: 12px; margin: 0; } .cf-track { height: 6px; background: var(--cf-rule); border-radius: 3px; margin-top: 8px; overflow: hidden; } /* fill width comes from --cf-goal-pct so a live count can update it without editing the page */ .cf-track .cf-fill { display: block; height: 100%; width: var(--cf-goal-pct, 77.5%); background: var(--cf-orange); font-size: 0; line-height: 0; } /* impact figures */ .cf-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--cf-ink); border-bottom: 1px solid var(--cf-rule); } .cf-fig { padding: 22px 20px 22px 0; } .cf-fig + .cf-fig { padding-left: 20px; border-left: 1px solid var(--cf-rule); } .cf-fig b, .cf-fig strong { display: block; font: 800 clamp(30px, 3.4vw, 42px)/1 var(--cf-head); letter-spacing: -.02em; color: var(--cf-orange); } .cf-fig span { display: block; font-size: 15px; margin-top: 8px; color: var(--cf-body); } .cf-fig.cf-hl b, .cf-fig.cf-hl strong { color: var(--cf-ink); } .cf-ledger { display: grid; grid-template-columns: 1fr 230px; gap: 48px; margin-top: 44px; } .cf-ledger h3 { font-size: 18px !important; margin-bottom: 10px; } .cf-items { list-style: none !important; margin: 0 !important; padding: 0 !important; columns: 2; column-gap: 40px; } .cf-items li { padding: 9px 0; border-bottom: 1px solid var(--cf-rule); break-inside: avoid; font-size: 16px !important; margin: 0 !important; list-style: none !important; } .cf-tot { border-left: 1px solid var(--cf-ink); padding-left: 24px; } .cf-tot b, .cf-tot strong { display: block; font: 800 clamp(36px, 3.4vw, 44px)/1 var(--cf-head); white-space: nowrap; letter-spacing: -.02em; margin: 6px 0 14px; } .cf-tot p { font-size: 15px !important; line-height: 1.9 !important; margin: 0; } /* membership table */ .cf-mtable { width: 100%; border-collapse: collapse; font-size: 16px; } .cf-mtable th { text-align: left; font: 700 12.5px/1.3 var(--cf-text); letter-spacing: .08em; text-transform: uppercase; color: var(--cf-mut); padding: 0 16px 10px 0; border: 0; border-bottom: 2px solid var(--cf-ink); } .cf-mtable td { padding: 16px 16px 16px 0; border: 0; border-bottom: 1px solid var(--cf-rule); vertical-align: middle; } .cf-mtable td.lv { font: 700 17px var(--cf-head); white-space: nowrap; } .cf-mtable td.pr { font: 800 20px var(--cf-head); white-space: nowrap; } .cf-mtable td.tx { color: var(--cf-mut); font-size: 14.5px; white-space: nowrap; } .cf-mtable td.go { text-align: right; padding-right: 0; } .cf-mtable tr.grp td { padding: 26px 0 8px; border-bottom: 1px solid var(--cf-ink); font: 700 13px var(--cf-text); letter-spacing: .08em; text-transform: uppercase; } .cf-sr { position: absolute; left: -9999px; } /* homepage membership summary: two paths, one primary CTA below */ .cf-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; } .cf-path { border: 1px solid #CFC9C2; border-radius: 10px; padding: 24px 24px 22px; background: var(--cf-paper); } .cf-path.cf-path-feature { border: 2px solid var(--cf-ink); } .cf-path h3 { font-size: 22px !important; margin: 0 0 6px !important; } .cf-path .cf-path-price { font: 800 30px/1.1 var(--cf-head) !important; letter-spacing: -.02em; color: var(--cf-ink) !important; margin: 0 0 12px !important; } .cf-path .cf-path-price span { font: 500 15px var(--cf-text); color: var(--cf-mut); letter-spacing: 0; } .cf-path p { font-size: 15.5px !important; color: var(--cf-body) !important; margin: 0 !important; } .cf-ctas .cf-more { align-self: center; margin-left: 8px; } /* events list */ .cf-ev { display: grid; grid-template-columns: 130px 1fr auto; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--cf-rule); } .cf-ev:first-of-type { border-top: 2px solid var(--cf-ink); } .cf-ev .dt { font: 800 15px/1.3 var(--cf-head); } .cf-ev .dt span { display: block; font: 500 14px var(--cf-text); color: var(--cf-mut); } .cf-ev h3 { font-size: 21px !important; margin: 0 !important; } .cf-ev p { font-size: 16px !important; color: var(--cf-body) !important; margin: 4px 0 0 !important; } /* WA Upcoming events gadget, restyled as the v2 event list */ body .WaGadgetUpcomingEvents .gadgetStyleBody ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--cf-ink); } body .WaGadgetUpcomingEvents .gadgetStyleBody li { padding: 18px 0; border-bottom: 1px solid var(--cf-rule); margin: 0; } body .WaGadgetUpcomingEvents .title a { font: 800 19px/1.25 var(--cf-head) !important; color: var(--cf-ink) !important; text-decoration: none !important; } body .WaGadgetUpcomingEvents .title a:hover { color: var(--cf-link) !important; } body .WaGadgetUpcomingEvents .date, body .WaGadgetUpcomingEvents .location { font: 500 14px/1.5 var(--cf-text) !important; color: var(--cf-mut) !important; } /* sponsors */ .cf-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .cf-logos > * { height: 72px; border: 1px solid var(--cf-rule); border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 10px; background: #fff; } .cf-logos img { max-height: 52px; max-width: 100%; object-fit: contain; } /* sponsor tiers: swap each placeholder for the sponsor's logo and link */ p.cf-tier { font: 700 13px/1.3 var(--cf-text) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cf-mut) !important; margin: 28px 0 12px !important; } p.cf-tier:first-of-type { margin-top: 0 !important; } .cf-logos-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-logos-lg > * { height: 112px; } .cf-logos-lg img { max-height: 84px; } a.cf-sponsor { text-decoration: none !important; transition: border-color .15s; } a.cf-sponsor:hover { border-color: var(--cf-ink); } .cf-friends { font-size: 16px !important; color: var(--cf-body) !important; } .cf-mnote { margin-top: 18px !important; font-size: 15px !important; } /* photo tiles: every WA slideshow becomes a fixed 4:3 tile, image cropped to fill. Pins Camera's JS-computed heights so tiles match and the page stops shifting. */ body .WaGadgetSlideshow { margin-bottom: 24px !important; } body .WaGadgetSlideshow .camera_wrap { background: var(--cf-soft) !important; border-radius: 6px; overflow: hidden; margin-bottom: 0 !important; } body .WaGadgetSlideshow .camera_fakehover { height: auto !important; aspect-ratio: 4 / 3; } body .WaGadgetSlideshow .camera_target, body .WaGadgetSlideshow .cameraCont, body .WaGadgetSlideshow .cameraSlide, body .WaGadgetSlideshow .camerarelative { height: 100% !important; } body .WaGadgetSlideshow .cameraSlide img { width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; top: 0 !important; left: 0 !important; } body .WaGadgetSlideshow .camera_thumbs_cont, body .WaGadgetSlideshow .camera_thumbs, body .WaGadgetSlideshow .camera_bar, body .WaGadgetSlideshow .camera_pag { display: none !important; } body .WaGadgetSlideshow .camera_prev, body .WaGadgetSlideshow .camera_next { border-radius: 50%; opacity: 0; transition: opacity .15s; } body .WaGadgetSlideshow:hover .camera_prev, body .WaGadgetSlideshow:hover .camera_next { opacity: 1; } /* two-up photo grid (WA's legacy two-column layout on the homepage): equal 24px gutters, ignore per-gadget margins left over from the old theme */ body .WaLegacyGrid > .WaLayoutTable { width: 100% !important; table-layout: fixed; border-collapse: collapse; } body .WaLegacyGrid > .WaLayoutTable td.WaLayoutSeparator { width: 0 !important; padding: 0 !important; } body .WaLegacyGrid > .WaLayoutTable td.WaLayoutItem { width: 50% !important; vertical-align: top; } body .WaLegacyGrid > .WaLayoutTable td.WaLayoutItem:first-child { padding-right: 12px !important; } body .WaLegacyGrid > .WaLayoutTable td.WaLayoutItem:last-child { padding-left: 12px !important; } body .WaLegacyGrid .WaGadgetSlideshow { margin: 0 0 24px !important; width: auto !important; } body .WaLegacyGrid .placeHolderContainer > div { padding-left: 0 !important; padding-right: 0 !important; } .cf-section.cf-photos-head { padding-bottom: 8px !important; } /* join page: SaaS-style tier comparison above a compact checkout form */ .cf-join-head { padding-bottom: 8px !important; text-align: center; } .cf-join-head h1 { margin: 0 auto 14px !important; } .cf-join-head .cf-lede { max-width: 44em; margin: 0 auto; font-size: 19px !important; } .cf-join-head .cf-eyebrow { margin-bottom: 12px; } .cf-valueprops { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; list-style: none !important; margin: 22px 0 0 !important; padding: 0 !important; } .cf-valueprops li { margin: 0 !important; list-style: none !important; font-weight: 600; font-size: 15.5px !important; } .cf-valueprops li::before { content: "\2713"; color: var(--cf-orange); font-weight: 800; margin-right: 8px; } .cf-join-note { font-size: 15px !important; color: var(--cf-mut) !important; margin-top: 8px !important; } .cf-join-head .cf-join-note { margin-top: 18px !important; } /* ---------- Join page: WA's membership application IS the tier comparison (CSS only) ---------- Level descriptions (WA: Members > Levels) are written as: price / billing+tax line / one "✓ feature" per line. The gadget sorts "By price, highest to lowest": cards 1-4 are the Tiger tiers, 5+ the supporting row. */ #cf-form { scroll-margin-top: 110px; } html { scroll-behavior: smooth; } .cf-form-head { text-align: left; padding-bottom: 0 !important; } body .WaGadgetContent:has(.cf-form-head) { margin-bottom: 0 !important; } body .WaGadgetMembershipApplication .formContainer:has(.levelProperties) .formTitleOuterContainer, body .WaGadgetMembershipApplication .formContainer:has(.levelProperties) .mandatoryFieldsTitle { display: none !important; } body .WaGadgetMembershipApplication .fieldSubContainer:has(.levelProperties) > .fieldLabel { display: none; } body .WaGadgetMembershipApplication .fieldSubContainer:has(.levelProperties) > .fieldBody { width: auto !important; margin: 0 !important; float: none !important; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 8px; } /* card */ body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem { position: relative; margin: 0 !important; padding: 0 !important; border: 1px solid #CFC9C2; border-radius: 12px; background: var(--cf-paper); transition: border-color .15s, box-shadow .15s; display: flex; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:hover { border-color: var(--cf-ink); } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:has(input:checked) { border: 2px solid var(--cf-orange); box-shadow: 0 12px 28px rgba(232,96,28,.14); } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:first-child { border-color: var(--cf-orange); } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) .typeRadioContainer { position: absolute !important; opacity: 0; pointer-events: none; margin: 0 !important; left: 0; top: 0; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem > .label { display: flex; flex: 1; min-width: 0; } body .WaGadgetMembershipApplication .levelProperties { display: flex !important; flex-direction: column; flex: 1; padding: 24px 22px 84px; cursor: pointer; min-width: 0; overflow-wrap: anywhere; } body .WaGadgetMembershipApplication .levelProperties .textLine { display: block !important; width: auto !important; } body .WaGadgetMembershipApplication .levelProperties .labelTitle { font: 800 20px/1.2 var(--cf-head) !important; color: var(--cf-ink); } body .WaGadgetMembershipApplication .levelProperties .labelSubTitle, body .WaGadgetMembershipApplication .levelRenewal, body .WaGadgetMembershipApplication .levelRecurring, body .WaGadgetMembershipApplication .levelProperties .textLine.typeInstruction:not(.extraInfo) { display: none !important; } body .WaGadgetMembershipApplication .levelProperties .extraInfo { display: block !important; } body .WaGadgetMembershipApplication .levelDescription { display: block; margin-top: 10px; font: 400 15px/1.75 var(--cf-text) !important; font-style: normal !important; color: var(--cf-ink) !important; } body .WaGadgetMembershipApplication .levelDescription::first-line { font: 800 40px/1.25 var(--cf-head); letter-spacing: -.03em; } /* the card's single action: Select / Selected */ body .WaGadgetMembershipApplication .levelProperties::after { content: "Select"; position: absolute; left: 22px; right: 22px; bottom: 22px; min-height: 46px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--cf-ink); border-radius: 999px; font: 700 15.5px/1 var(--cf-text); color: var(--cf-ink); background: transparent; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:first-child .levelProperties::after { background: var(--cf-orange); border-color: var(--cf-orange); } /* once any level is selected, only the selected card stays orange */ body .WaGadgetMembershipApplication .groupBodyVertical:has(input:checked) > .fieldItem:first-child:not(:has(input:checked)) { border-color: #CFC9C2; } body .WaGadgetMembershipApplication .groupBodyVertical:has(input:checked) > .fieldItem:first-child:not(:has(input:checked)) .levelProperties::after { background: transparent; border-color: var(--cf-ink); } body .WaGadgetMembershipApplication .fieldItem:hover .levelProperties::after { background: var(--cf-ink); color: #fff; border-color: var(--cf-ink); } body .WaGadgetMembershipApplication .fieldItem:has(input:checked) .levelProperties::after { content: "Selected \2713"; background: var(--cf-orange); border-color: var(--cf-orange); color: var(--cf-ink); } /* supporting row */ body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(n+5) { margin-top: 52px !important; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(5)::before { content: "Supporting memberships"; position: absolute; left: 0; top: -36px; font: 800 20px/1.2 var(--cf-head); color: var(--cf-ink); white-space: nowrap; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(n+5) .levelProperties { padding: 18px 18px 74px; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(n+5) .labelTitle { font-size: 17px !important; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(n+5) .levelDescription { font-size: 14.5px !important; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(n+5) .levelDescription::first-line { font-size: 26px; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(n+5) .levelProperties::after { left: 18px; right: 18px; bottom: 18px; min-height: 40px; font-size: 14.5px; } /* continue */ body .WaGadgetMembershipApplication .navigationOuterContainer { margin-top: 28px; } /* ---------- Join flow, every step after the level cards ---------- The hero and level heading give way to a two-column layout: the form (left) and a sticky "your membership at work" card (right, .cf-flow-aside in the top Content gadget). */ .cf-flow-aside { display: none; } body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 64px; align-items: start; } body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) > * { grid-column: 1; min-width: 0; } body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) > .WaGadgetContent:has(.cf-flow-aside) { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 112px; margin: 40px 0 0 !important; } body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) .cf-join-head, body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) .cf-form-head, body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) .cf-pick-only { display: none !important; } body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) > .WaGadgetContent:has(.cf-pick-only) { display: none !important; } body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) .cf-flow-aside { display: block; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) { padding-top: 40px; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)::before { content: "Join the Boosters \00B7 2026\2013 27"; display: block; margin-bottom: 14px; font: 700 13px/1 var(--cf-text); letter-spacing: .08em; text-transform: uppercase; color: var(--cf-link); } /* selected level summary */ body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoOuterContainer { margin: 0 0 32px !important; background: none !important; padding: 0 !important; border: 0 !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoOuterContainer .infoContainer, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoOuterContainer .inner { background: none !important; padding: 0 !important; border: 0 !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoOuterContainer .kvTable { border: 1px solid #CFC9C2; border-radius: 12px; background: var(--cf-paper) !important; padding: 18px 22px !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoSection { display: block !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoTitle { float: none !important; width: auto !important; text-align: left !important; padding: 0 0 6px !important; font: 700 12.5px/1 var(--cf-text) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cf-mut) !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoText { float: none !important; margin: 0 !important; padding: 0 !important; font: 800 20px/1.3 var(--cf-head) !important; color: var(--cf-ink); } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoText .textLine { display: block; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoText .levelPrice { font: inherit !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoText .levelRenewal, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoText .levelRecurring { display: inline; font: 400 14.5px/1.6 var(--cf-text) !important; color: var(--cf-mut); } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .infoText .textLine:has(.levelRecurring) { display: none; } /* section titles */ body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .formTitleContainer .inner { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--cf-ink) !important; padding: 0 0 10px !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) h3.formTitle { font: 800 28px/1.15 var(--cf-head) !important; letter-spacing: -.02em; margin: 0 !important; border: 0 !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .mandatoryFieldsTitle { font-size: 13.5px !important; color: var(--cf-mut); margin-left: auto !important; float: none !important; white-space: nowrap; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .mandatoryFieldsTitle strong { font-weight: 500; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .sectionTitle, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .sectionOuterContainer h4 { font: 800 19px/1.3 var(--cf-head) !important; margin: 28px 0 4px !important; } /* fields: label above input, one comfortable column */ body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .fieldSubContainer > table, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .fieldSubContainer > table > tbody, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .fieldSubContainer tr, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .fieldSubContainer td { display: block !important; width: auto !important; padding: 0 !important; text-align: left !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .fieldContainer { margin: 0 !important; padding: 18px 0 0 !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .fieldLabel { float: none !important; width: auto !important; text-align: left !important; padding: 0 0 7px !important; font-size: 15px !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .fieldLabel strong { font-weight: 700; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .fieldBody { float: none !important; margin: 0 !important; width: auto !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .labeledTextContainer:has(.validationError[style*="none"]):not(:has(.validationError:not([style*="none"]))) { display: none; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) input.typeText, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) input[type=text], body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) input[type=email], body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) input[type=tel], body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) input[type=password], body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) select, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) textarea { box-sizing: border-box; width: 100% !important; max-width: 560px; min-height: 48px; padding: 10px 14px !important; border: 1px solid #BDB6AE !important; border-radius: 8px !important; font: 400 16px/1.4 var(--cf-text) !important; background: #fff; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) textarea { min-height: 110px; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) input:focus, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) select:focus, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) textarea:focus { outline: 3px solid rgba(232,96,28,.35); outline-offset: 1px; border-color: var(--cf-orange) !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .validationError { display: block; margin-top: 6px; color: #B3261E !important; font-size: 14px; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .validationError[style*="none"] { display: none !important; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .generalFieldsContainer .inner, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .sectionContainer .inner { padding: 0 !important; background: none !important; } /* actions sit right under the fields: Next primary, Back tertiary, Cancel quiet */ body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .navigationOuterContainer { margin-top: 32px !important; padding-top: 22px !important; border-top: 1px solid var(--cf-rule); } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .navigationContainer .inner { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .navigationContainer .left, body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .navigationContainer .right { float: none !important; display: flex; align-items: center; gap: 12px; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .navigationContainer .right { flex-direction: row-reverse; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .navigationContainer .clearEndContainer { display: none; } /* WA notices (e.g. "this email is already in our database"): calm card, first button primary, the rest secondary */ body .WaGadgetMembershipApplication .commonMessageBox { margin: 0 0 24px !important; } body .WaGadgetMembershipApplication .commonMessageBox .messageBox { background-color: #FFF6EE !important; border: 1px solid #F3C9A8 !important; border-radius: 12px !important; box-shadow: none !important; padding: 16px 20px !important; } body .WaGadgetMembershipApplication .commonMessageBox .text { font: 500 15.5px/1.55 var(--cf-text) !important; color: var(--cf-ink) !important; } body .WaGadgetMembershipApplication .commonMessageBox :is(input[type=button], input[type=submit], button, a.button) ~ :is(input[type=button], input[type=submit], button, a.button) { background: transparent !important; color: var(--cf-ink) !important; border: 2px solid var(--cf-ink) !important; } /* the side card */ .cf-flow-aside { border: 1px solid var(--cf-rule); border-radius: 14px; overflow: hidden; background: var(--cf-paper); } .cf-flow-aside img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 !important; } .cf-flow-aside .cf-flow-card { padding: 20px 22px 4px; } .cf-flow-aside .cf-flow-fig { display: block; font: 800 40px/1.1 var(--cf-head); letter-spacing: -.03em; color: var(--cf-ink); margin: 8px 0 6px; } .cf-flow-aside p { font-size: 15px !important; line-height: 1.55 !important; margin: 0 0 12px !important; color: var(--cf-body) !important; } .cf-flow-aside .cf-flow-b { display: none; } body:has(.WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel):not(.WaGadgetMembershipApplicationStateIdentify)) .cf-flow-a { display: none; } body:has(.WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel):not(.WaGadgetMembershipApplicationStateIdentify)) .cf-flow-b { display: block; } .cf-flow-aside .cf-flow-up { margin: 8px 22px 22px; padding: 16px 18px; border-radius: 10px; background: #FFF1E6; } .cf-flow-aside .cf-flow-up strong { display: block; font: 800 17px/1.3 var(--cf-head); margin-bottom: 4px; } .cf-flow-aside .cf-flow-up p { font-size: 14.5px !important; margin-bottom: 10px !important; } .cf-flow-aside label.cf-more { cursor: pointer; font-weight: 700; color: var(--cf-link); } body:not(:has(#FunctionalBlock1_ctl00_memberApplicationMain_ctl00_stepTemplate_prev)) .cf-flow-up { display: none; } /* about */ .cf-about { display: grid; grid-template-columns: 200px 1fr; gap: 48px; } .cf-yr { font: 800 64px/1 var(--cf-head); letter-spacing: -.03em; color: var(--cf-orange); } .cf-about blockquote, blockquote.cf-quote { margin: 0; font-size: 20px; line-height: 1.5; border-left: 3px solid var(--cf-orange); padding-left: 20px; } .cf-links { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 24px; font-weight: 600; } /* closing band (homepage) */ .cf-close { background: var(--cf-ink); color: #fff; padding: 64px 24px; text-align: center; /* full-bleed band from inside the 1040px content column */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 0; } html body { overflow-x: clip; } .cf-close h2, body .gadgetContentEditableArea .cf-close h2 { color: #fff !important; max-width: 20em; margin: 0 auto !important; } /* WA content gadgets clip overflow; let the full-bleed band escape */ /* empty template content areas still carry 20px padding: hide them on rendered pages so the band meets the footer */ body:not(.pageModeEdit) .WaPlaceHolder:not(:has([class*="WaGadget"], [class*="WaLayoutContainer"], [class*="WaCustomLayoutContainer"])) { display: none; } body .WaPlaceHolder:has(.cf-close) > div { padding-bottom: 0 !important; } body .WaGadgetContent:has(.cf-close), body .WaGadgetContent:has(.cf-close) > .gadgetStyleBody { overflow: visible !important; } .cf-close p { color: #B5AFA8 !important; margin: 12px auto 26px !important; max-width: 32em; } .cf-close .cf-btn:hover { background: #fff !important; border-color: #fff !important; color: var(--cf-ink) !important; } /* ---------- Impact page (/grants): funding showcase ---------- */ .cf-impact-hero { padding-bottom: 40px !important; } .cf-impact-hero .cf-lede { margin-top: 14px; } /* where the $1.5M has gone: one bar per category, scaled to $510K */ .cf-split { margin-top: 44px; max-width: 760px; } .cf-split h3 { font-size: 18px !important; margin-bottom: 14px !important; } .cf-hbars { list-style: none !important; margin: 0 !important; padding: 0 !important; } .cf-hbars li { display: grid; grid-template-columns: 250px minmax(0, 1fr) 96px; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cf-rule); margin: 0 !important; list-style: none !important; font-size: 15.5px !important; } .cf-hbar { display: block; height: 12px; background: var(--cf-soft); border-radius: 6px; overflow: hidden; } .cf-hbar i, .cf-hfill { font-size: 0; line-height: 0; overflow: hidden; display: block; height: 100%; width: calc(var(--v) / 510 * 100%); min-width: 4px; background: var(--cf-orange); border-radius: 6px; } .cf-hbars b, .cf-hbars strong { font: 800 18px/1 var(--cf-head); text-align: right; white-space: nowrap; } .cf-hbars b small, .cf-hbars strong small { font: 500 13px var(--cf-text); color: var(--cf-mut); } .cf-note, .gadgetContentEditableArea p.cf-note { font-size: 14.5px !important; color: var(--cf-mut) !important; margin: 14px 0 0 !important; } /* 2025 showcase cards */ .cf-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .cf-shot h3 { font-size: 19px !important; margin: 4px 0 0 !important; } .cf-ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; margin-bottom: 14px; background: var(--cf-soft) repeating-linear-gradient(135deg, transparent 0 14px, rgba(20,18,16,.035) 14px 28px); border: 1px dashed #CFC9C2; } img.cf-ph { border: 0; height: auto; } .cf-ph span { font: 600 13px var(--cf-text); letter-spacing: .08em; text-transform: uppercase; color: var(--cf-mut); } .cf-ph span::before { content: ""; display: block; width: 30px; height: 22px; margin: 0 auto 10px; border: 2px solid var(--cf-mut); border-radius: 5px; background: radial-gradient(circle, var(--cf-mut) 0 4px, transparent 5px); } .cf-tag { display: inline-block; font: 700 12px/1 var(--cf-text); letter-spacing: .08em; text-transform: uppercase; color: var(--cf-link); } .cf-also, .gadgetContentEditableArea p.cf-also { font: 700 13px/1.3 var(--cf-text) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-mut) !important; margin: 40px 0 12px !important; } .cf-chips { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; align-content: flex-start; } .cf-chips li { margin: 0 !important; list-style: none !important; padding: 7px 14px; border: 1px solid var(--cf-rule); border-radius: 999px; background: var(--cf-paper); font-size: 15px !important; line-height: 1.3 !important; } /* grants by year: vertical bars, height = $K / 57 (tallest year) */ .cf-bars { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; align-items: end; height: 260px; border-bottom: 2px solid var(--cf-ink); } .cf-bars li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; margin: 0 !important; list-style: none !important; position: relative; } .cf-bars b, .cf-bars strong { font: 700 14.5px/1 var(--cf-text); margin-bottom: 8px; white-space: nowrap; } .cf-bar { font-size: 0; line-height: 0; overflow: hidden; display: block; width: 100%; max-width: 72px; height: calc(var(--v) / 57 * 210px); background: var(--cf-ink); border-radius: 4px 4px 0 0; } .cf-bars .cf-now .cf-bar { background: var(--cf-orange); } .cf-bars em { position: absolute; bottom: -30px; font: 600 14px var(--cf-text); font-style: normal; color: var(--cf-mut); } #cf-years .cf-bars + .cf-note { margin-top: 44px !important; } /* archive: year + total on the left, items as chips */ .cf-archive { margin-top: 48px; border-top: 2px solid var(--cf-ink); } .cf-yrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--cf-rule); } .cf-yhd b, .cf-yhd strong { display: block; font: 800 24px/1 var(--cf-head); letter-spacing: -.01em; } .cf-yhd span { display: block; margin-top: 6px; font: 700 15px var(--cf-text); color: var(--cf-link); } .cf-yrow .cf-chips li { font-size: 14.5px !important; padding: 6px 12px; } .cf-yrow p { margin: 0 !important; align-self: center; } .cf-yrow:last-child { border-bottom: 0; } #cf-years { padding-bottom: 40px !important; } /* apply cards keep their button at the bottom */ #cf-apply .cf-path { display: flex; flex-direction: column; } #cf-apply .cf-path .cf-ctas { margin-top: auto; padding-top: 22px; } #cf-apply .cf-path h3 { margin-top: 2px !important; } .cf-section[id], .cf-section-first[id] { scroll-margin-top: 110px; } /* secondary button on the dark band */ .cf-close .cf-btn.cf-line.cf-on-dark { border-color: #fff !important; color: #fff !important; } .cf-close .cf-btn.cf-line.cf-on-dark:hover { background: #fff !important; color: var(--cf-ink) !important; } /* ---------- Scholarships page (/scholarships) ---------- */ .cf-steps { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: none; } .cf-steps li { list-style: none !important; margin: 0 !important; padding: 24px 24px 22px !important; border: 1px solid #CFC9C2; border-radius: 10px; position: relative; } .cf-steps li + li::before { content: ""; position: absolute; left: -25px; top: 44px; width: 24px; border-top: 2px solid var(--cf-ink); } .cf-step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cf-orange); color: var(--cf-ink); font: 800 18px/1 var(--cf-head); margin-bottom: 14px; } .cf-steps h3 { margin: 0 0 6px !important; } .cf-steps p { font-size: 15.5px !important; color: var(--cf-body) !important; margin: 0 !important; } .cf-steps p.cf-step-when { margin-top: 14px !important; font-weight: 700; color: var(--cf-ink) !important; } .cf-criteria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 2px solid var(--cf-ink); padding-top: 22px; } .cf-crit p { margin: 8px 0 0 !important; font-size: 16px !important; } .cf-section .cf-note .cf-more { margin-left: 6px; } .cf-awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .cf-award { border: 1px solid #CFC9C2; border-radius: 10px; padding: 22px 24px; } .cf-award h3 { font-size: 18px !important; margin: 0 0 14px !important; } .cf-contact { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .cf-contact h3 { margin: 0 !important; } .cf-contact .cf-eyebrow { margin-bottom: 6px; } /* ---------- Past scholarship winners (/pastscholars) ---------- */ .cf-decades { list-style: none !important; margin: 0 0 8px !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; } .cf-decades li { list-style: none !important; margin: 0 !important; } body .cf-decades a, body .cf-decades a:link, body .cf-decades a:visited { display: inline-block; padding: 8px 16px; border: 2px solid var(--cf-ink); border-radius: 999px; font: 700 15px/1 var(--cf-text) !important; color: var(--cf-ink) !important; text-decoration: none !important; } body .cf-decades a:hover { background: var(--cf-ink); color: #fff !important; } .cf-decade { padding-top: 48px; scroll-margin-top: 110px; } .cf-decade h2 { margin-bottom: 12px !important; } .cf-decade .cf-archive { margin-top: 0; } .cf-chips li small { font: 600 12px var(--cf-text); color: var(--cf-link); margin-left: 4px; } /* ---------- Board page (/board) ---------- */ .cf-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cf-person { display: flex; gap: 14px; align-items: center; border: 1px solid #CFC9C2; border-radius: 10px; padding: 18px 20px; } .cf-person strong { display: block; font: 700 18px/1.25 var(--cf-head) !important; margin-top: 4px; } .cf-person strong small { display: block; font: 500 14px var(--cf-text); color: var(--cf-mut); margin-top: 3px; } .cf-avs { display: flex; flex-shrink: 0; } .cf-avs .cf-av + .cf-av { margin-left: -12px; box-shadow: 0 0 0 3px var(--cf-paper); } .cf-av { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--cf-ink); color: #fff; font: 800 16px/1 var(--cf-head); letter-spacing: .02em; object-fit: cover; } .cf-people .cf-person:first-child .cf-av { background: var(--cf-orange); color: var(--cf-ink); } .cf-roster { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; border-top: 2px solid var(--cf-ink); } .cf-roster li { list-style: none !important; margin: 0 !important; display: flex; align-items: center; gap: 12px; padding: 12px 0 !important; border-bottom: 1px solid var(--cf-rule); font-size: 16px !important; } .cf-roster .cf-av { width: 36px; height: 36px; font-size: 13px; background: var(--cf-soft); color: var(--cf-ink); } /* ---------- Inner pages (committees, events, about, contact, recruitment, history, WA widget pages) ---------- */ .cf-page-head { padding-bottom: 28px !important; } .cf-photo img, img.cf-photo { background: var(--cf-soft); } /* committees */ .cf-comms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cf-comm { border: 1px solid #CFC9C2; border-radius: 10px; padding: 20px 22px; } .cf-comm h3 { font-size: 17px !important; margin: 0 0 12px !important; padding-bottom: 12px; border-bottom: 2px solid var(--cf-orange); } .cf-comm-people { list-style: none !important; margin: 0 !important; padding: 0 !important; } .cf-comm-people li { list-style: none !important; margin: 0 !important; display: flex; align-items: center; gap: 12px; padding: 7px 0 !important; font: 600 16px/1.3 var(--cf-text) !important; } .cf-comm-people small { display: block; font: 500 13.5px var(--cf-text); color: var(--cf-mut); } .cf-comm-people .cf-av { width: 36px; height: 36px; font-size: 13px; } .cf-comm-members { margin: 10px 0 0 !important; padding-top: 12px; border-top: 1px solid #E6E1DB; font: 400 15px/1.55 var(--cf-text) !important; color: var(--cf-ink, #1A1A1A); } .cf-comm-label { display: block; font: 700 12px var(--cf-text); letter-spacing: .08em; text-transform: uppercase; color: var(--cf-mut); margin-bottom: 4px; } /* event cards */ .cf-evcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .cf-evcard { border: 1px solid #CFC9C2; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } img.cf-flyer { display: block; width: 100%; height: 300px; object-fit: contain; background: var(--cf-ink); } .cf-evcard-b { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; } .cf-evcard-b h3 { margin: 6px 0 6px !important; } .cf-evcard-b p { font-size: 15.5px !important; color: var(--cf-body) !important; margin: 0 !important; } .cf-evcard-b .cf-ctas { margin-top: auto; padding-top: 18px; } /* letters and long-form text */ .cf-letter { max-width: 720px; } .cf-letter p { font-size: 17.5px !important; line-height: 1.7 !important; margin: 0 0 1.1em !important; } .cf-letter h3 { margin: 32px 0 14px !important; } .cf-items.cf-items-1 { columns: 1; } .cf-letter .cf-chips { margin-bottom: 1.4em !important; } .cf-sign, .gadgetContentEditableArea p.cf-sign { margin-top: 28px !important; color: var(--cf-mut) !important; font-size: 15.5px !important; } .cf-sign strong { display: block; font: 800 22px/1.2 var(--cf-head); color: var(--cf-ink); } .cf-about-nav { margin-top: 26px !important; } .cf-letter blockquote.cf-quote { margin: 28px 0 !important; } /* contact cards */ .cf-contacts .cf-person strong { font-size: 17px !important; overflow-wrap: anywhere; margin: 4px 0 10px; } /* four-step process */ .cf-steps.cf-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .cf-steps.cf-steps-4 li + li::before { left: -21px; width: 20px; } /* history */ .cf-figs.cf-figs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-history { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; } .cf-history h2 { margin-top: 0 !important; } .cf-history blockquote.cf-quote { margin-top: 24px !important; } .cf-path .cf-avs { margin-bottom: 14px; } /* sponsors: the intro gadget sits above WA's store catalog */ body :has(> .WaGadgetOnlineStoreCatalog) { display: flex; flex-direction: column; } body :has(> .WaGadgetOnlineStoreCatalog) > .WaGadgetContent:has(.cf-sponsor-head) { order: -1; } .cf-sponsor-head .cf-paths { margin-top: 28px; } #cf-apply .cf-path, .cf-sponsor-head .cf-path { display: flex; flex-direction: column; } .cf-sponsor-head .cf-path .cf-ctas { margin-top: auto; padding-top: 22px; } /* WA widgets on inner pages: calendar, store, directory, donation form */ body .WaGadgetEvents, body .WaGadgetOnlineStoreCatalog, body .WaGadgetMemberDirectory, body .WaGadgetDonationForm { margin-bottom: 64px !important; } body .WaGadgetEvents .gadgetStyleTitle h4, body .WaGadgetEvents h3.sectionTitle { font-size: 22px !important; } body .WaGadgetEvents .boxOuterContainer, body .WaGadgetEvents .eventsListContainer { border-top: 2px solid var(--cf-ink); } body .WaGadgetEvents .boxBodyOuterContainer, body .WaGadgetEvents li { border-bottom: 1px solid var(--cf-rule); } body .WaGadgetEvents .eventTitle a, body .WaGadgetEvents .boxHeaderTitle a { font: 800 19px/1.3 var(--cf-head) !important; color: var(--cf-ink) !important; text-decoration: none !important; } body .WaGadgetDonationForm .formContainer, body .WaGadgetOnlineStoreCatalog .gadgetStyleBody { max-width: 760px; } body .WaGadgetOnlineStoreCatalog .noProductsMessage, body .WaGadgetOnlineStoreCatalog .gadgetStyleBody > p { color: var(--cf-mut); } /* a gadget that now carries a v2 page header drops its old built-in gadget title (e.g. Sponsors "Download Sponsorship Form") */ body .WaGadgetContent:has(.cf-section-first) > .gadgetStyleTitle { display: none !important; } /* a retired gadget whose only content is

hides its whole layout row (Board page) */ body:not(.pageModeEdit) .WaLayoutRow:has(.cf-gadget-hide):not(:has(.cf-section-first, .cf-section)) { display: none !important; } body:not(.pageModeEdit) .WaGadgetContent:has(> .gadgetStyleBody > .cf-gadget-hide) { display: none !important; } /* ---------- footer ---------- */ body .zoneFooter1, body .zoneFooter2, body .zoneFooter3 { background: var(--cf-ink) !important; } body .WaPlaceHolderFooter, body .WaPlaceHolderFooter1, body .WaPlaceHolderFooter2 { background: var(--cf-ink) !important; background-image: none !important; color: #A9A39C; } body .WaPlaceHolderFooter > div { padding-top: 0; padding-bottom: 0; } body .WaPlaceHolderFooter1 > div:empty, body .WaPlaceHolderFooter2 > div:empty { display: none; } body .WaPlaceHolderFooter .gadgetContentEditableArea, body .WaPlaceHolderFooter .gadgetContentEditableArea p, body .WaPlaceHolderFooter1 .gadgetContentEditableArea p { color: #A9A39C !important; font-size: 15px !important; } .cf-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 40px 0 44px; font-size: 15px; color: #A9A39C; } .cf-foot b, .cf-foot strong { display: block; color: #fff; font-weight: 700; margin-bottom: 8px; } .cf-foot p { line-height: 1.9 !important; margin: 0 !important; color: #A9A39C !important; } body .cf-foot a, body .cf-foot a:link, body .cf-foot a:visited { color: var(--cf-foot-link) !important; text-decoration: none !important; } body .cf-foot a:hover { color: #fff !important; text-decoration: underline !important; } body .zoneWAbranding, body .WABranding { background: var(--cf-ink) !important; color: #6B6560; } body .WABranding a { color: #8C857E !important; } /* sticky mobile join bar (homepage only, see .cf-joinbar markup) */ .cf-joinbar { display: none; } /* ---------- mid width ---------- */ @media screen and (max-width: 991px) { body .WaPlaceHolder > div { padding-left: 32px; padding-right: 32px; } body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a { padding: 10px 8px !important; font-size: 14.5px !important; } .cf-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-fig:nth-child(3) { padding-left: 0; border-left: 0; } .cf-fig:nth-child(n+3) { border-top: 1px solid var(--cf-rule); } .cf-ledger { grid-template-columns: 1fr; gap: 28px; } .cf-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-steps, .cf-criteria { gap: 16px; } .cf-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-comms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-steps.cf-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-steps.cf-steps-4 li:nth-child(3)::before { display: none; } .cf-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-bars { gap: 8px; } .cf-tot { border-left: 0; padding-left: 0; border-top: 1px solid var(--cf-ink); padding-top: 18px; } .cf-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) { grid-template-columns: repeat(2, minmax(0, 1fr)); } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(n+5) { margin-top: 0 !important; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(5) { margin-top: 52px !important; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(6) { margin-top: 52px !important; } } /* ---------- phone ---------- */ @media screen and (max-width: 767px) { body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) { display: flex; flex-direction: column; } body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) > .WaGadgetContent:has(.cf-flow-aside) { position: static; margin-top: 32px !important; } body :has(> .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel)) > .WaGadgetMembershipApplication { order: -1; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .navigationContainer .inner { flex-direction: column-reverse; align-items: stretch; gap: 14px; } body .WaGadgetMembershipApplication:not(.WaGadgetMembershipApplicationStateSelectLevel) .navigationContainer .right { flex-direction: column-reverse; align-items: stretch; } html body { font-size: 16px !important; } body .gadgetContentEditableArea, body .gadgetContentEditableArea p, body .gadgetContentEditableArea li { font-size: 16px; } body .WaPlaceHolder > div { padding-left: 20px; padding-right: 20px; } .cf-section { padding-top: 44px !important; padding-bottom: 44px !important; } .cf-section-first { padding-top: 4px !important; padding-bottom: 40px !important; } .cf-hide-phone { display: none !important; } .cf-grid2 { grid-template-columns: 1fr; gap: 28px; } .cf-paths { grid-template-columns: 1fr; } .cf-join-head { text-align: left; } .cf-valueprops { justify-content: flex-start; flex-direction: column; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(-n+4) { grid-column: 1 / -1; } body .WaGadgetMembershipApplication .groupBodyVertical:has(.levelProperties) > .fieldItem:nth-child(6) { margin-top: 52px !important; } .cf-ctas .cf-more { margin: 6px 0 0; } .cf-hero .cf-photo { order: -1; } .cf-logos-lg { grid-template-columns: 1fr; } body:has(.cf-joinbar) { padding-bottom: 72px; } /* photo grid stacks to one column */ body .WaLegacyGrid > .WaLayoutTable, body .WaLegacyGrid > .WaLayoutTable > tbody, body .WaLegacyGrid > .WaLayoutTable tr, body .WaLegacyGrid > .WaLayoutTable td.WaLayoutItem { display: block; width: 100% !important; } body .WaLegacyGrid > .WaLayoutTable td.WaLayoutItem:first-child, body .WaLegacyGrid > .WaLayoutTable td.WaLayoutItem:last-child { padding: 0 !important; } body .WaLegacyGrid .WaGadgetSlideshow { margin: 0 0 16px !important; } .cf-ctas .cf-btn { flex: 1 1 100%; } .cf-lede, .gadgetContentEditableArea p.cf-lede { font-size: 17px !important; } .cf-figs { grid-template-columns: 1fr 1fr; } .cf-fig { padding: 16px 12px 16px 0; } .cf-fig + .cf-fig { padding-left: 12px; } .cf-fig:nth-child(3) { padding-left: 0; } .cf-items { columns: 1; } .cf-hbars li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; } .cf-hbars .cf-hbar { grid-column: 1 / -1; grid-row: 2; } .cf-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .cf-shot h3 { font-size: 16px !important; } .cf-ph { margin-bottom: 10px; } .cf-ph span { font-size: 11px; } .cf-chips li, .cf-yrow .cf-chips li { font-size: 14px !important; padding: 5px 11px; } .cf-bars { gap: 4px; height: 220px; } .cf-bar { height: calc(var(--v) / 57 * 170px); } .cf-bars b, .cf-bars strong { font-size: 11.5px; } .cf-bars em { font-size: 12px; } .cf-yrow { grid-template-columns: 1fr; gap: 10px; } .cf-yhd { display: flex; align-items: baseline; gap: 12px; } .cf-yhd span { margin-top: 0; } .cf-steps, .cf-criteria, .cf-awards { grid-template-columns: 1fr; } .cf-people { grid-template-columns: 1fr; gap: 10px; } .cf-comms, .cf-evcards { grid-template-columns: 1fr; } .cf-steps.cf-steps-4 { grid-template-columns: 1fr; } .cf-steps.cf-steps-4 li + li::before { display: block; left: 40px; top: -17px; width: 0; height: 16px; border-top: 0; border-left: 2px solid var(--cf-ink); } .cf-history { grid-template-columns: 1fr; gap: 8px; } .cf-figs.cf-figs-3 { grid-template-columns: 1fr 1fr; } img.cf-flyer { height: 220px; } .cf-letter p { font-size: 16.5px !important; } .cf-roster { grid-template-columns: 1fr 1fr; gap: 0 14px; } .cf-roster li { font-size: 15px !important; gap: 8px; } .cf-roster .cf-av { width: 30px; height: 30px; font-size: 11px; } .cf-steps li + li::before { left: 40px; top: -17px; width: 0; height: 16px; border-top: 0; border-left: 2px solid var(--cf-ink); } .cf-contact .cf-btn { width: 100%; white-space: normal; } .cf-hdr { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; } /* membership table becomes stacked rows */ .cf-mtable thead { display: none; } .cf-mtable, .cf-mtable tbody, .cf-mtable tr, .cf-mtable td { display: block; width: 100%; } .cf-mtable tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cf-rule); } .cf-mtable td { border: 0; padding: 0; } .cf-mtable td.lv { grid-column: 1; } .cf-mtable td.pr { grid-column: 2; grid-row: 1; text-align: right; } .cf-mtable td.pk { grid-column: 1 / -1; margin-top: 4px; font-size: 15px; } .cf-mtable td.tx { grid-column: 1; margin-top: 6px; white-space: normal; } .cf-mtable td.tx::after { content: " tax-deductible"; } .cf-mtable td.go { grid-column: 2; margin-top: 6px; } .cf-mtable tr.grp { display: block; padding: 22px 0 6px; border-bottom: 1px solid var(--cf-ink); } .cf-mtable tr.grp td { border: 0; padding: 0; } .cf-ev { grid-template-columns: 1fr; gap: 6px; } .cf-ev .go { margin-top: 8px; } .cf-ev .go .cf-btn { width: 100%; box-sizing: border-box; } .cf-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-about { grid-template-columns: 1fr; gap: 12px; } .cf-yr { font-size: 44px; } .cf-about blockquote { font-size: 18px; } .cf-foot { grid-template-columns: 1fr 1fr; gap: 24px; } .cf-foot > div:first-child { grid-column: 1 / -1; } .cf-joinbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--cf-ink); } .cf-joinbar span { flex: 1; font-size: 14px; line-height: 1.3; } .cf-joinbar b, .cf-joinbar strong { display: block; font-size: 15px; } /* phone header (v2): brand on the left, menu + account buttons on the right, one row. Header row: brand only; the desktop menu cell and the log in/Join cell are hidden (Join lives in the homepage join bar and the menu). */ body .WaPlaceHolderHeader .WaLayoutTable, body .WaPlaceHolderHeader .WaLayoutTable > tbody { display: block; width: 100%; } body .WaPlaceHolderHeader .WaLayoutTable tr { display: flex !important; align-items: center; min-height: 72px; padding-right: 104px; box-sizing: border-box; } body .WaPlaceHolderHeader td.WaLayoutItem:first-child { display: block; flex: 1; width: auto !important; white-space: normal; } body .WaPlaceHolderHeader td.WaLayoutItem:not(:first-child), body .WaPlaceHolderHeader td.WaLayoutSeparator { display: none !important; } body .WaPlaceHolderHeader > div { padding-top: 10px; padding-bottom: 10px; } .cf-brand b, .cf-brand strong { font-size: 17px; max-width: 9.5em; text-wrap: balance; } .cf-brand small { display: none; } .cf-mark { width: 57px; height: 44px; font-size: 0 !important; } /* Casefile's mobile panel, laid transparently over the header row and pinned with it */ body .mobilePanelContainer { position: sticky; top: 0; height: 0; z-index: 1000; } body .WaPlaceHolderMobilePanel > div { padding: 0 !important; max-width: none !important; } body .WaGadgetMobilePanel .mobilePanel { height: 97px; background: transparent !important; color: var(--cf-ink) !important; border: 0 !important; pointer-events: none; } body .WaGadgetMobilePanel .mobilePanel .mobilePanelButton { pointer-events: auto; top: 28px !important; width: 44px !important; height: 44px !important; border-radius: 50%; background: var(--cf-paper) !important; color: var(--cf-ink) !important; } body .WaGadgetMobilePanel .mobilePanel .mobilePanelButton:before { width: 44px; height: 44px; font-size: 20px; line-height: 44px; } body .WaGadgetMobilePanel .mobilePanel .buttonMenu { left: auto !important; right: 68px !important; } body .WaGadgetMobilePanel .mobilePanel .buttonLogin { right: 20px !important; background: var(--cf-soft) !important; } body .WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover, body .WaGadgetMobilePanel .mobilePanel .mobilePanelButton.active { background: var(--cf-ink) !important; color: #fff !important; } /* dropdowns: white panel under the header, v2 type */ body .WaGadgetMobilePanel .mobilePanel .menuInner, body .WaGadgetMobilePanel .mobilePanel .loginInner { pointer-events: auto; top: 97px !important; } body .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel { background: var(--cf-paper) !important; border-top: 0 !important; border-bottom: 1px solid var(--cf-ink); padding: 8px 0 16px !important; box-shadow: 0 12px 24px rgba(20,18,16,.12); } body .WaGadgetMobilePanel .mobilePanel .menuInner ul ul, body .WaGadgetMobilePanel .mobilePanel .menuInner ul ul ul { background: var(--cf-paper) !important; } body .WaGadgetMobilePanel .menuInner ul.firstLevel > li > .item > a { color: var(--cf-ink) !important; font: 700 17px/1.4 var(--cf-head) !important; text-transform: none !important; padding: 10px 20px !important; } body .WaGadgetMobilePanel .menuInner ul ul li > .item > a { color: var(--cf-body) !important; font: 500 15px/1.4 var(--cf-text) !important; padding: 6px 20px 6px 32px !important; } body .WaGadgetMobilePanel .menuInner li.sel > .item > a { color: var(--cf-link) !important; } body .WaGadgetMobilePanel .mobilePanel .loginInner { background: var(--cf-paper) !important; color: var(--cf-ink) !important; border-bottom: 1px solid var(--cf-ink); padding: 16px 20px !important; } } /* Kept from the pre-v2 site: hide slideshow pagination dots */ .camera_pag { display: none !important; } /* Phone fixes found in the production go-live check (2026-10-24) */ body .gadgetStyleBody iframe { max-width: 100% !important; } body .WaGadgetEvents, body .WaGadgetUpcomingEvents { overflow-wrap: anywhere; }