/* Theme Name: Creative Cabinet (Neve child) Template: neve Version: 0.9.5 Description: Re-skin layer for creativecabinet.org. Keeps re-skin edits safe from Neve updates. Palette stays CPC's current colors: set them in the Neve Customizer, not here. */ /* Site-wide footer band: candidate + volunteer sign-ups beside the Stay Connected newsletter form, kept compact. */ .cc-footer-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 1.5rem 3.5rem; align-items: center; max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; } .cc-signup-twins { display: grid; gap: .9rem; } .cc-signup-twins > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; } .cc-signup-twins h3 { margin: 0; font-size: 1.15rem; line-height: 1.1; white-space: nowrap; color: var(--nv-primary-accent); } .cc-signup-twins .button { padding: .5rem 1.1rem; white-space: nowrap; } .cc-stay-connected h2 { color: var(--nv-primary-accent); font-size: 1.6rem !important; line-height: 1; margin: 0 0 .3rem; text-align: left !important; } .cc-stay-connected p { font-size: .95rem !important; line-height: 1.4 !important; text-align: left; margin: 0 0 .6rem; } .cc-stay-connected .otter-form__container { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; } .cc-stay-connected .otter-form__container > .wp-block-group { display: flex; gap: .5rem; flex: 2 1 220px; margin: 0; } .cc-stay-connected .otter-form__container > .wp-block-group > * { flex: 1 1 0; margin: 0; } .cc-stay-connected .otter-form__container > .wp-block-themeisle-blocks-form-input { flex: 1.2 1 150px; margin: 0; } .cc-stay-connected .otter-form__container > .wp-block-button { flex: 0 0 auto; width: auto !important; margin: 0 !important; } @media (max-width: 900px) { .cc-footer-band { grid-template-columns: minmax(0, 1fr); } } /* Footer menu: never break a word across lines. */ footer .menu a { white-space: nowrap; } footer #menu-footer-menu, footer #menu-sub-menu { flex-wrap: wrap; } footer #menu-footer-menu a, footer #menu-sub-menu a { padding: 10px 14px !important; } footer #menu-footer-menu { font-size: 1.05em !important; } /* About: Got a question? (the Stay Connected half moved to the site-wide footer). */ .cc-question { background: var(--nv-site-bg); padding: 4rem 1.5rem !important; text-align: center; } .cc-question .wp-block-group__inner-container { max-width: 640px; margin: 0 auto; } /* Stats band (Home). */ .cc-stats-section { background: var(--nv-light-bg); padding: 1.75rem 1.5rem !important; } .cc-stats { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; text-align: center; color: var(--nv-primary-accent); } .cc-stats .cc-num { font-family: "Sofia Sans Condensed", sans-serif; font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 900; line-height: 1; } /* Photo grid (pattern cc/photo-grid): the "Candidates we've helped" slide from the volunteer orientation deck. Square monochrome tiles, 4px gaps, light-blue label tiles; name on hover/focus/tap, quote or bio in the spotlight. */ .cc-grid-section { background: var(--nv-light-bg); padding: 3.5rem clamp(1rem, 4vw, 3rem) !important; display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; grid-template-areas: "intro grid"; column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 1.5rem; align-items: start; } .cc-grid-section .wp-block-group__inner-container { display: contents; } /* classic themes wrap group contents; let the tiles sit in the grid */ .cc-grid-section > *, .cc-grid-section > .wp-block-group__inner-container > * { margin: 0 !important; max-width: none !important; } .cc-grid-intro { grid-area: intro; } .cc-grid-intro > * + *, .cc-grid-intro > .wp-block-group__inner-container > * + * { margin-top: 1rem; } .cc-grid-intro h2 { color: var(--nv-primary-accent); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; text-transform: uppercase; } .cc-grid-intro p { color: var(--nv-primary-accent); font-family: "Noto Serif", Georgia, serif; font-size: 1.1rem; line-height: 1.5; } .cc-grid { grid-area: grid; display: grid; grid-template-columns: repeat(var(--cc-cols, 7), minmax(0, 1fr)); gap: 4px; } .cc-grid--5 { --cc-cols: 5; } .cc-grid--3 { --cc-cols: 3; } .cc-grid--4 { --cc-cols: 4; } .cc-grid-section .cc-grid--4 { max-width: 620px !important; } /* About "Our Team": the smaller grid, names on hover */ .cc-grid-section .cc-grid--3 { max-width: 480px !important; } /* About "Our Team": the smaller grid */ .page-id-1123 .cc-grid-section .cc-grid--5 { max-width: 775px !important; } /* About only (Candidates and page 255 use --5 full width): five people in one row, tiles the same size as --4 */ .cc-grid > *, .cc-grid > .wp-block-group__inner-container > * { margin: 0 !important; aspect-ratio: 1; position: relative; overflow: hidden; } .cc-grid figure { cursor: pointer; } .cc-grid img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) sepia(.15); } .cc-grid figure:focus { outline: none; } .cc-grid figure:focus-visible, .cc-grid figure.is-active { box-shadow: inset 0 0 0 4px var(--nv-site-bg); } .cc-grid figure:focus-visible img, .cc-grid figure.is-active img { opacity: .92; } .cc-grid figcaption { position: absolute; inset: auto 0 0 0; margin: 0; padding: .4rem .5rem; background: color-mix(in srgb, var(--nv-primary-accent) 88%, transparent); color: #fff; font-size: .75rem; line-height: 1.2; text-align: left; opacity: 0; transition: opacity .15s; } .cc-grid figcaption strong { display: block; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: .95rem; text-transform: uppercase; } .cc-grid figure:hover figcaption, .cc-grid figure:focus figcaption, .cc-grid figure.is-active figcaption { opacity: 1; } .cc-grid .cc-role { display: block; } .cc-quote { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* read by screen readers in the tile; shown in the spotlight */ .cc-grid .cc-tile--label { display: flex; align-items: center; justify-content: center; padding: .5rem; background: var(--nv-site-bg); color: var(--nv-primary-accent); font-family: "Noto Serif", Georgia, serif; font-weight: 700; font-size: clamp(.75rem, 1.05vw, 1rem); line-height: 1.25; text-align: center; } .cc-grid .cc-tile--label a { color: inherit; } .cc-grid .cc-tile--wide { grid-column: span 2; aspect-ratio: auto !important; } .cc-grid-spot { color: var(--nv-primary-accent); } .cc-grid-spot:empty { display: none; } .cc-grid-section.is-spotting .cc-grid-intro p { display: none; } /* the quote takes the intro paragraph's place while a tile is active */ .cc-grid-spot strong { display: block; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.4rem; text-transform: uppercase; line-height: 1.1; } .cc-grid-spot .cc-role { display: block; font-size: .95rem; margin-top: .2rem; } .cc-grid-spot .cc-quote { position: static; width: auto; height: auto; clip: auto; white-space: normal; display: block; margin-top: .6rem; font-family: "Noto Serif", Georgia, serif; font-size: 1rem; line-height: 1.5; } @media (hover: none) { .cc-grid figcaption { opacity: 1; } } /* touch screens can't hover: names always on */ @media (max-width: 1024px) { .cc-grid:not(.cc-grid--3):not(.cc-grid--4) { --cc-cols: 5; } } @media (max-width: 760px) { .cc-grid-section { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "grid"; padding: 3rem 1rem !important; } .cc-grid:not(.cc-grid--3):not(.cc-grid--4) { --cc-cols: 3; } .cc-grid--4 { --cc-cols: 2; } .cc-grid figcaption { font-size: .65rem; padding: .3rem .35rem; } .cc-grid figcaption strong { font-size: .8rem; } .cc-grid .cc-role { display: none; } } /* Partner logos (About). */ .cc-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1.5rem; align-items: center; justify-items: center; max-width: 1000px; margin: 2rem auto 0; padding: 0 1rem; } .cc-logos .wp-block-group__inner-container { display: contents; } .cc-logos > *, .cc-logos > .wp-block-group__inner-container > * { margin: 0 !important; } .cc-logos img { max-height: 90px; width: auto; max-width: 100%; object-fit: contain; } .cc-logos img[src$=".svg"] { width: 140px; } /* SVGs have no intrinsic width */ .cc-logos .cc-logo-text { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: var(--nv-primary-accent); text-align: center; } /* Volunteers: the four reasons as a compact 2x2 grid (replaces the arrow-panel accordion). */ .cc-reasons > .wp-block-group__inner-container, .cc-reasons:not(:has(> .wp-block-group__inner-container)) { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; } .cc-reason h3 { margin: 0 0 .3rem; color: var(--nv-light-bg); font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.2rem !important; line-height: 1.1; text-transform: uppercase; } .cc-reason p { margin: 0; color: var(--nv-light-bg); font-family: "Noto Serif", Georgia, serif; font-size: .95rem; line-height: 1.45; } @media (max-width: 600px) { .cc-reasons > .wp-block-group__inner-container, .cc-reasons:not(:has(> .wp-block-group__inner-container)) { grid-template-columns: 1fr; } } .cc-btn-light .wp-block-button__link { color: var(--nv-light-bg) !important; border-color: var(--nv-light-bg) !important; } /* buttons on navy sections */ /* Contact: bring the form up the page. */ .page-id-1546 #wp-block-themeisle-blocks-advanced-columns-d1a2890b { padding-top: 2.5rem !important; } .page-id-1546 #wp-block-themeisle-blocks-advanced-columns-8d245c5b { padding-top: .5rem !important; } .page-id-1546 #wp-block-themeisle-blocks-advanced-columns-8d245c5b .wp-block-spacer { height: 3rem !important; } /* Jennie pass 2026-10-13: definition sentence (Home, About), three-line stats, About co-founders line, Contact sign-up routes. */ .cc-definition { max-width: 900px; margin: 2.5rem auto !important; padding: 0 1.5rem; color: var(--nv-primary-accent); font-family: "Noto Serif", Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; } .cc-stats > div { max-width: 15rem; } .cc-stats .cc-label { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.25rem; text-transform: uppercase; margin-top: .35rem; } .cc-stats .cc-sub { font-family: "Montserrat", sans-serif; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1.35; } .cc-grid-intro .cc-cofounders { font-family: "Montserrat", sans-serif; font-size: .95rem; } .cc-contact-routes { font-family: "Noto Serif", Georgia, serif; font-size: 1.2rem; margin-top: 1rem; } /* Oct 14 tightening (Alex's staging notes). */ /* Home: compact hero (headline, subhead, photo) so the stats sit near the top. */ .home #wp-block-themeisle-blocks-advanced-columns-d1a2890b { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .home #wp-block-themeisle-blocks-advanced-column-187c496f { padding-top: .5rem !important; padding-bottom: .5rem !important; display: flex; flex-direction: column; justify-content: center; } .home #wp-block-themeisle-blocks-advanced-column-187c496f h1 { font-size: clamp(2rem, 3.6vw, 3.25rem) !important; line-height: 1.02; margin-bottom: 0; } .home #wp-block-themeisle-blocks-advanced-column-187c496f .cc-definition { margin: 1rem 0 0 !important; padding: 0; max-width: 34rem; font-size: 1.1rem; text-align: left; } .home #wp-block-themeisle-blocks-advanced-column-bf858570 img { max-height: 360px; width: 100%; object-fit: cover; object-position: 50% 0; } /* About: the mission row leads, compact. */ .page-id-1123 #wp-block-themeisle-blocks-advanced-columns-d1a2890b { padding-top: 2rem !important; padding-bottom: 2rem !important; } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-187c496f p { font-size: 1.25rem !important; line-height: 1.5; max-width: 900px; margin-left: auto; margin-right: auto; } /* Volunteers: "Find your path" — each skill and what it does for a candidate (replaces the two scrolling tickers). */ .cc-paths { background: var(--nv-light-bg); padding: 3rem clamp(1rem, 4vw, 3rem) !important; text-align: center; } .cc-paths > .wp-block-group__inner-container { max-width: 1200px; margin: 0 auto; } .cc-paths h2 { color: var(--nv-primary-accent); font-size: clamp(2rem, 3.4vw, 3rem) !important; line-height: 1; text-transform: uppercase; margin: 0 0 .4rem; } .cc-paths-kicker { color: var(--nv-primary-accent); font-family: "Noto Serif", Georgia, serif; font-size: 1.1rem; margin: 0 0 1.5rem; } .cc-path-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px; text-align: left; } .cc-path { background: var(--nv-site-bg); color: var(--nv-primary-accent); padding: 1.1rem 1.2rem; margin: 0 !important; } .cc-path h3 { margin: 0 0 .5rem; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.3rem !important; line-height: 1.05; text-transform: uppercase; color: var(--nv-primary-accent); } .cc-path-lead { margin: 0 0 .2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .cc-path ul { margin: 0; padding-left: 1.1rem; font-family: "Noto Serif", Georgia, serif; font-size: 1rem; line-height: 1.4; } .cc-paths .wp-block-buttons { justify-content: center; margin-top: 1.5rem; } /* ===== Oct 14 pm: layout + brand pass (Creative Cabinet Brand Guidelines v1: headlines Sofia Sans Condensed ExtraBold caps, subheads Montserrat, body Noto Serif; dark blue #16355b, light blue #50c3ff, cream #faf5e0, green #33ffa2 for calls to action). ===== */ /* Header sits in the page flow (sticky), so it can never cover a section's first row, even on scroll bounce. Overrides the old fixed-header rule in Additional CSS. */ header.header { position: sticky !important; top: 0; height: auto !important; z-index: 999; } .wrapper { overflow: clip !important; } /* Neve's overflow:hidden would stop the sticky header; clip still prevents sideways scroll */ .admin-bar header.header { top: 32px; margin-top: 0 !important; } #content, .logged-in #content { margin-top: 0 !important; } @media (max-width: 782px) { .admin-bar header.header { top: 0; } } /* Shared buttons in the brand style: Sofia Sans Condensed caps, dark-blue outline. */ .cc-signup-twins .button, .cc-stay-connected button, .cc-path-cta a { font-family: "Sofia Sans Condensed", sans-serif !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem !important; line-height: 1.2; color: var(--nv-primary-accent) !important; background: transparent !important; border: 2px solid var(--nv-primary-accent) !important; border-radius: 10px !important; text-decoration: none; transition: background-color .15s, color .15s; } .cc-signup-twins .button:hover, .cc-stay-connected button:hover { background: var(--nv-primary-accent) !important; color: var(--nv-light-bg) !important; } /* Stay Connected form in brand fonts. */ .cc-stay-connected .otter-form-input-label { font-family: "Montserrat", sans-serif; font-size: .8rem; color: var(--nv-primary-accent); margin-bottom: .2rem; } .cc-stay-connected .otter-form-input-label .required { color: var(--nv-primary-accent); } .cc-stay-connected .otter-form-input { font-family: "Noto Serif", Georgia, serif !important; font-size: 1rem !important; padding: .5rem .65rem !important; border: 2px solid var(--nv-primary-accent) !important; border-radius: 6px !important; background: #fff !important; } .cc-stay-connected .otter-form__container button { margin-top: 0 !important; padding: .55rem 1.4rem !important; } /* Bands: full-width rows with a two-column split (headline + button left, copy right). */ .cc-band { padding: 3rem clamp(1rem, 4vw, 3rem) !important; margin: 0 !important; } .cc-band > .wp-block-group__inner-container { max-width: 1200px; margin: 0 auto; } .cc-band--navy { background: var(--nv-primary-accent); color: var(--nv-light-bg); } .cc-band--cream { background: var(--nv-light-bg); color: var(--nv-primary-accent); } .cc-band h1, .cc-band h2 { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 3rem) !important; line-height: 1.02; margin: 0 0 1rem; color: inherit; } .cc-band p { font-family: "Noto Serif", Georgia, serif; font-size: 1.05rem; line-height: 1.55; margin: 0 0 .9rem; color: inherit; } .cc-split > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.5rem 3.5rem; align-items: center; } .cc-split-a > .wp-block-group__inner-container > :last-child, .cc-split-b > .wp-block-group__inner-container > :last-child { margin-bottom: 0; } .cc-band .wp-block-buttons { margin-top: .25rem; } @media (max-width: 860px) { .cc-split > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); } } /* Home: map row. Headline and map read as one row; the map's own counts and filters sit inside a white box. */ .cc-map-row h2 { margin-bottom: .75rem; } .cc-map-box { background: #fff; border-radius: 14px; padding: 1rem 1rem .25rem; box-shadow: 0 1px 0 rgba(22, 53, 91, .08); } .cc-map-box iframe { display: block; } /* Home: the work samples under High-Quality Help. */ .cc-help-row .cc-media { margin-top: 2rem; } .cc-help-row .cc-media img { width: 100%; height: auto; } /* Volunteers: Justin Bibb photo, cropped to his face, beside Who you'll help. */ .cc-photo-row .cc-split-a img { display: block; height: 520px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; } /* whole photo, so the name graphic at the bottom stays */ .cc-hero .cc-reasons > .wp-block-group__inner-container { gap: 1rem 1.5rem; } @media (max-width: 860px) { .cc-photo-row .cc-split-a img { height: 420px; } } /* Find your path: tiles show the skill; hover, focus or tap shows what it does for a candidate (same treatment as the photo grids). */ .cc-path-grid > .wp-block-group__inner-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .cc-path { position: relative; aspect-ratio: 16 / 10; display: flex; cursor: pointer; padding: 1rem !important; transition: background-color .15s; } .cc-path > .wp-block-group__inner-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; } .cc-path h3 { font-size: 1.45rem !important; margin: 0 !important; transition: font-size .15s; } .cc-path .cc-path-lead, .cc-path ul { display: none; } .cc-path ul { list-style: none; padding: 0 !important; margin: 0; } .cc-path:not(.cc-path--cta):hover, .cc-path:not(.cc-path--cta):focus, .cc-path:not(.cc-path--cta):focus-within { background: var(--nv-primary-accent); outline: none; } .cc-path:not(.cc-path--cta):hover h3, .cc-path:not(.cc-path--cta):focus h3, .cc-path:not(.cc-path--cta):focus-within h3 { color: var(--nv-light-bg); font-size: 1.05rem !important; margin-bottom: .45rem !important; } .cc-path:hover .cc-path-lead, .cc-path:focus .cc-path-lead, .cc-path:focus-within .cc-path-lead { display: block; color: var(--nv-site-bg); } .cc-path:hover ul, .cc-path:focus ul, .cc-path:focus-within ul { display: block; color: var(--nv-light-bg); } .cc-path--cta { background: var(--nv-c-2) !important; } .cc-path-cta { margin: 0 !important; } .cc-path-cta a { display: inline-block; padding: .6rem 1.5rem; } @media (hover: none) { .cc-path .cc-path-lead, .cc-path ul { display: block; } .cc-path { aspect-ratio: auto; } .cc-path h3 { font-size: 1.15rem !important; margin-bottom: .4rem !important; } } @media (max-width: 900px) { .cc-path-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* About: Our Story at body size, so the row stays compact (the page gets its full pass after Jennie's input). */ .page-id-1123 #wp-block-themeisle-blocks-advanced-columns-6889d267 p { font-size: 1.1rem !important; line-height: 1.55 !important; } .page-id-1123 #wp-block-themeisle-blocks-advanced-columns-6889d267 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .cc-stay-connected .otter-form__container > *, .cc-stay-connected .otter-form__container > .wp-block-group > *, .cc-stay-connected .otter-form-input { min-width: 0 !important; } .cc-stay-connected .otter-form-input { width: 100% !important; } /* ===== Oct 14: Brand Guidelines v1 site-wide (draft, Oct 13). ===== Headlines: Sofia Sans Condensed, all caps. Subheads, labels, stat subtext, form labels: Montserrat Regular, initial caps (served locally by OMGF). Body: Noto Serif. Navy #16355b text + logo, light blue #50c3ff accents, cream #faf5e0 backgrounds, green #33ffa2 only for calls to action. Palette set here as CSS variables, so the Customizer values stay untouched underneath. (html:root / html body: this stylesheet loads before Neve's inline variables, so it needs the extra specificity to win.) */ html:root { --nv-primary-accent: #16355b; --nv-dark-bg: #16355b; --nv-text-color: #16355b; --nv-site-bg: #50c3ff; --nv-light-bg: #ffffff; --nv-c-2: #33ffa2; --bodyfontfamily: "Noto Serif", Georgia, serif; } html body { font-family: "Noto Serif", Georgia, serif; color: #16355b; } h1, h2, h3, h4, h5, h6, .wp-block-heading { font-family: "Sofia Sans Condensed", sans-serif !important; font-weight: 900; text-transform: uppercase; } .cc-stats .cc-sub, .cc-role, .cc-grid-spot .cc-role, .cc-path-lead, .cc-paths-kicker, .cc-stay-connected .otter-form-input-label, .cc-grid-intro .cc-cofounders { font-family: "Montserrat", sans-serif !important; font-weight: 400; text-transform: capitalize; letter-spacing: 0; } .cc-stats .cc-sub { font-size: .95rem; } .cc-stay-connected .otter-form-input { font-family: "Montserrat", sans-serif !important; } /* Green is for calls to action only: the nav's current-page and hover underline become navy. */ header .nav-menu-primary ul.menu-desktop li a:hover, header .nav-menu-primary ul.menu-desktop li.current_page_item a, header .nav-menu-primary ul.menu-desktop li.current-menu-item a { border-bottom-color: var(--nv-primary-accent) !important; } /* About: the mission row was green; cream background instead (green is reserved for calls to action). */ .page-id-1123 #wp-block-themeisle-blocks-advanced-columns-d1a2890b { background: var(--nv-light-bg) !important; } .cc-grid figcaption { font-family: "Noto Serif", Georgia, serif; } .cc-stay-connected .otter-form-input-label { color: var(--nv-primary-accent) !important; } /* Oct 14 (late): Home JOIN US moves into the grid as a green call-to-action tile (same treatment as Volunteers' Sign up tile). */ .cc-grid .cc-tile--cta { background: var(--nv-c-2); display: flex; align-items: center; justify-content: center; } .cc-grid .cc-tile--cta > .wp-block-group__inner-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .cc-grid .cc-tile--cta .cc-path-cta { margin: 0 !important; } /* Volunteers: the Sign up tile answers "Have these skills?" */ .cc-path--cta > .wp-block-group__inner-container { gap: .7rem; } .cc-path-or { margin: 0 !important; font-family: "Montserrat", sans-serif; font-size: 1rem; color: var(--nv-primary-accent); } /* Footer: both sign-up buttons the same width. */ .cc-signup-twins .button { display: inline-block; min-width: 15.5rem; text-align: center; box-sizing: border-box; } /* Home map: "Candidates Served" sits on the same line as the map's own counts, top right of the box (stacks above it on narrow screens). */ @media (min-width: 861px) { .cc-map-row > .wp-block-group__inner-container { position: relative; } .cc-map-row h2 { position: absolute; top: 1.35rem; right: 1.75rem; margin: 0 !important; z-index: 2; font-size: clamp(2rem, 3vw, 2.75rem) !important; } } /* ===== Oct 15 working session (Alex + Jennie), v0.5.3. ===== */ /* Home: one stat bar (the cream band), now four stats. */ .cc-stats { gap: 2rem 3.5rem; } /* Home: the map's own counts lead the row now that the "Candidates Served" headline is gone; tighter white box. */ .cc-map-row { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .cc-map-box { padding: .5rem .5rem 0; border-radius: 10px; } /* Home: High-Quality Help work samples: one even 12px gutter everywhere, a little narrower, centered. */ .cc-help-row .cc-media { max-width: 1040px; margin: 2rem auto 0; } .cc-help-row .cc-media .wp-block-columns { gap: 12px !important; margin: 0 !important; padding: 0 !important; align-items: stretch; } .cc-help-row .cc-media .wp-block-columns + .wp-block-columns { margin-top: 12px !important; } .cc-help-row .cc-media .wp-block-column { display: flex; flex-direction: column; gap: 12px; } .cc-help-row .cc-media .wp-block-column > * { margin-top: 0 !important; margin-bottom: 0 !important; } .cc-help-row .cc-media .wp-block-spacer { display: none; } .cc-help-row .cc-media figure, .cc-help-row .cc-media .wp-block-group { margin: 0 !important; } .cc-help-row .cc-media .wpzoom-video-popup-block { display: block; background-size: cover !important; background-position: center !important; } /* The video thumbnails pointed at /~civicp6/ (the old server path); serve them from this site's uploads. */ .cc-help-row .ticss-ea4f62a6 { background-image: url(/wp-content/uploads/2024/04/CPC_Kristy_Housing2.jpg) !important; } .cc-help-row .ticss-3d60b65d { background-image: url(/wp-content/uploads/2024/04/Waterman_Video2.jpg) !important; } .cc-help-row .ticss-83001e0c { background-image: url(/wp-content/uploads/2024/04/Lisa_Rally2.jpg) !important; } /* Footer sign-ups: the headings wrapped into the buttons at mid widths ("Want to volunteer your skills?" ran over its button). */ .cc-signup-twins h3 { white-space: normal; text-wrap: balance; } /* Home: Why We Do This: headline on top, the grid takes the whole row; the intro copy lives in the Join Us square and a hovered volunteer's quote takes its place there. */ .cc-grid-section--stacked { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "grid"; } .cc-grid-section--stacked .cc-grid { max-width: 1200px !important; width: 100%; margin: 0 auto !important; } .cc-grid-section--stacked .cc-grid-intro { max-width: 1200px !important; width: 100%; margin: 0 auto !important; } .cc-grid .cc-spot-host > .wp-block-group__inner-container, .cc-grid .cc-spot-host:not(:has(> .wp-block-group__inner-container)) { flex-direction: column; gap: .8rem; padding: 1rem 1.25rem; text-align: center; } .cc-grid .cc-spot-host { overflow: hidden; } .cc-spot-copy { margin: 0 !important; color: var(--nv-primary-accent); font-family: "Noto Serif", Georgia, serif; font-size: clamp(.85rem, 1.15vw, 1.05rem); line-height: 1.4; } .cc-grid-section.is-spotting .cc-spot-host .cc-spot-copy { display: none; } .cc-spot-host .cc-grid-spot { text-align: left; width: 100%; } .cc-spot-host .cc-grid-spot strong { font-size: 1.05rem; } .cc-spot-host .cc-grid-spot .cc-role { font-size: .8rem; margin-top: 0; } .cc-spot-host .cc-grid-spot .cc-quote { font-size: clamp(.72rem, .95vw, .9rem); line-height: 1.35; margin-top: .3rem; } @media (max-width: 760px) { .cc-grid-section--stacked .cc-tile--wide { grid-column: span 3; } } /* Candidates: headline across the top, subhead under it, then the copy. */ .cc-hero--stacked > .wp-block-group__inner-container > *, .cc-hero--stacked > * { max-width: 1200px; margin-left: auto !important; margin-right: auto !important; } .cc-hero--stacked h1 { margin-bottom: .5rem !important; } .cc-hero--stacked .cc-subhead { font-family: "Montserrat", sans-serif !important; font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important; line-height: 1.4; margin-bottom: 1.5rem !important; } .cc-hero-body p { max-width: 62rem; } /* Candidates grid: names only on the tiles (office shows in the spotlight); square corners like Home (the headshot files have rounded corners baked in, so crop them off). */ .cc-grid--names figcaption .cc-role { display: none; } .cc-grid--names img { transform: scale(1.1); } /* Volunteers: eight skill tiles, one line each on hover; the sign-up sits under the grid. */ .cc-path .cc-path-desc { display: none; margin: 0; font-family: "Noto Serif", Georgia, serif; font-size: 1rem; line-height: 1.4; } .cc-path:hover .cc-path-desc, .cc-path:focus .cc-path-desc, .cc-path:focus-within .cc-path-desc { display: block; color: var(--nv-light-bg); } @media (hover: none) { .cc-path .cc-path-desc { display: block; } } .cc-paths-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.25rem; margin-top: 1.5rem !important; } .cc-paths-more > .wp-block-group__inner-container { display: contents; } /* About: Our Story runs full width now that the original-organization logos are gone. */ .page-id-1123 #wp-block-themeisle-blocks-advanced-column-90095443 { flex-basis: 100% !important; width: 100% !important; max-width: 900px; margin: 0 auto; } .cc-help-row h2 { white-space: nowrap; } /* exactly two lines: "High-Quality Help" / "For Free" */ /* Press Room (pattern cc/press-room): narrative top left, evergreen-links box top right (first on phones), then one line per release, newest first. */ .cc-press { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem; } .cc-press h2 { color: var(--nv-primary-accent); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 2.5rem 0 .75rem; } .cc-press-layout, .cc-press-layout > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; } .cc-press-layout > .wp-block-group__inner-container { grid-column: 1 / -1; } .cc-press-main > :first-child h2, .cc-press-main > .wp-block-group__inner-container > :first-child h2 { margin-top: 1rem; } .cc-press-box { background: var(--nv-light-bg); padding: 1.25rem 1.5rem !important; margin-top: 1rem; position: sticky; top: 7rem; } .cc-press-box h3 { color: var(--nv-primary-accent); font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.1rem; margin: 1.25rem 0 .35rem; } .cc-press-box h3:first-child, .cc-press-box > .wp-block-group__inner-container > h3:first-child { margin-top: 0; } .cc-press-box p { margin: 0; font-size: .95rem; line-height: 1.45; } @media (max-width: 860px) { .cc-press-layout, .cc-press-layout > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 1.5rem; } .cc-press-box { order: -1; position: static; } } .cc-press-glance .cc-stats { justify-content: flex-start; gap: 1.5rem 2.25rem; text-align: left; margin-top: 1rem; flex-wrap: nowrap; } .cc-press-glance .cc-stats > div { flex: 1 1 0; max-width: 13rem; } @media (max-width: 560px) { .cc-press-glance .cc-stats { flex-wrap: wrap; } .cc-press-glance .cc-stats > div { flex: 1 1 100%; } } /* Leadership: headshot left; name, bio, LinkedIn and the headshot note stacked beside it. */ .cc-press-leader, .cc-press-leader > .wp-block-group__inner-container { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 1.25rem; align-items: start; } .cc-press-leader > .wp-block-group__inner-container { grid-column: 1 / -1; } .cc-press-leader h2 { grid-column: 1 / -1; } .cc-press-leader > *:not(h2):not(.cc-press-headshot):not(.wp-block-group__inner-container), .cc-press-leader > .wp-block-group__inner-container > *:not(h2):not(.cc-press-headshot) { grid-column: 2; margin-top: 0; margin-bottom: .5rem; } .cc-press-headshot { grid-column: 1; grid-row: 2 / span 3; width: 140px; margin: .25rem 0 0 !important; } .cc-press-headshot img { width: 140px; height: 140px; object-fit: cover; } .cc-press-social { margin: .25rem 0 .5rem !important; padding: 0; } .cc-press-social .wp-social-link { color: var(--nv-primary-accent); } .cc-press-social .wp-social-link svg { width: 28px; height: 28px; } @media (max-width: 560px) { .cc-press-leader, .cc-press-leader > .wp-block-group__inner-container { grid-template-columns: 96px minmax(0, 1fr); } .cc-press-headshot, .cc-press-headshot img { width: 96px; height: 96px; } } .cc-press-angles ul { margin: 0; padding-left: 1.2rem; } .cc-press-angles li { margin: .4rem 0; } .cc-press-list { margin-top: 3rem; } .cc-press-list ul { list-style: none; margin: 0; padding: 0; } .cc-press-list li { display: flex; gap: 1.25rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--nv-primary-accent) 20%, transparent); } @media (max-width: 560px) { .cc-press-list li { flex-direction: column; gap: .15rem; } } .cc-press-list time { flex: 0 0 7.5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; } .cc-press-list a { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.2rem; line-height: 1.2; color: var(--nv-primary-accent); } /* The boilerplate block appended to every release. */ .cc-press-boilerplate { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--nv-primary-accent); font-size: .95rem; } /* History timeline (pattern cc/history-timeline): About, under "Our story". Horizontal year track; the bar is candidates served to date and is decorative, the text carries every number. Compact pass 2026-10-18. Scrolls sideways on phones. */ .cc-tl-section { padding: 1.5rem 1.5rem 1.25rem !important; } .cc-tl-section .cc-tl-h { margin: 0 auto .6rem !important; color: var(--nv-primary-accent); font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.7rem) !important; line-height: 1; max-width: 1000px; } .cc-tl-scroll { max-width: 1000px; margin: 0 auto; overflow-x: auto; scroll-snap-type: x proximity; } .cc-tl { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(10, minmax(4.4rem, 1fr)); min-width: 44rem; color: var(--nv-primary-accent); } .cc-tl li { scroll-snap-align: start; margin: 0; padding: 0 .35rem; border-left: 1px solid color-mix(in srgb, var(--nv-primary-accent) 18%, transparent); min-width: 0; } .cc-tl li:first-child { border-left: 0; padding-left: 0; } .cc-tl-plot { display: flex; align-items: flex-end; height: 2rem; } .cc-tl-bar { display: block; width: 100%; min-height: 2px; background: var(--nv-primary-accent); border-radius: 2px 2px 0 0; } .cc-tl .is-now .cc-tl-bar { background: repeating-linear-gradient(135deg, var(--nv-primary-accent) 0 4px, color-mix(in srgb, var(--nv-primary-accent) 45%, transparent) 4px 7px); } .cc-tl time { display: block; padding-top: .2rem; border-top: 2px solid var(--nv-primary-accent); font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums; } .cc-tl h3 { margin: .2rem 0 0 !important; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: .72rem !important; line-height: 1.05; color: inherit; } .cc-tl-n { margin: .25rem 0 0 !important; font-family: "Montserrat", sans-serif; font-size: .64rem !important; line-height: 1.3 !important; font-variant-numeric: tabular-nums; } .cc-tl-n b { font-weight: 700; } .cc-tl-key { max-width: 1000px; margin: .5rem auto 0 !important; font-family: "Montserrat", sans-serif; font-size: .66rem !important; line-height: 1.35; opacity: .75; } /* Bars rise in once the timeline scrolls into view (assets/timeline.js adds .is-armed, then .is-in). Without JS, or with reduced motion, they simply show. */ .cc-tl.is-armed .cc-tl-bar { transform: scaleY(0); transform-origin: bottom; } .cc-tl.is-armed.is-in .cc-tl-bar { transform: scaleY(1); transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .cc-tl.is-armed.is-in li:nth-child(2) .cc-tl-bar { transition-delay: .05s; } .cc-tl.is-armed.is-in li:nth-child(3) .cc-tl-bar { transition-delay: .1s; } .cc-tl.is-armed.is-in li:nth-child(4) .cc-tl-bar { transition-delay: .15s; } .cc-tl.is-armed.is-in li:nth-child(5) .cc-tl-bar { transition-delay: .2s; } .cc-tl.is-armed.is-in li:nth-child(6) .cc-tl-bar { transition-delay: .25s; } .cc-tl.is-armed.is-in li:nth-child(7) .cc-tl-bar { transition-delay: .3s; } .cc-tl.is-armed.is-in li:nth-child(8) .cc-tl-bar { transition-delay: .35s; } .cc-tl.is-armed.is-in li:nth-child(9) .cc-tl-bar { transition-delay: .4s; } .cc-tl.is-armed.is-in li:nth-child(10) .cc-tl-bar { transition-delay: .45s; } @media (prefers-reduced-motion: reduce) { .cc-tl.is-armed .cc-tl-bar { transform: none; transition: none; } } /* Performance + navigation pass (2026-10-19). */ /* Home hero: two calls to action under the definition, in the header DONATE button's green style. */ .home .cc-hero-ctas { margin-top: 1.25rem; gap: .6rem; } .home .cc-hero-ctas .wp-block-button__link { font-family: "Sofia Sans Condensed", sans-serif !important; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: 1.1rem; line-height: 1.2; padding: .55rem 1.2rem; color: var(--nv-primary-accent) !important; background: var(--nv-c-2) !important; border: 2px solid transparent; border-radius: 7px; transition: border-color .3s; } .home .cc-hero-ctas .wp-block-button__link:hover, .home .cc-hero-ctas .wp-block-button__link:focus-visible { border-color: var(--nv-primary-accent); } /* Work samples on Home are looping muted videos (were GIFs): same box as the old images. */ .cc-work-sample { margin: 0; } .cc-work-sample video { display: block; width: 100%; height: auto; } /* Section headings demoted from H1 to H2 (one H1 per page) keep the H1 look; their size is set inline. */ h2.cc-h1-look { font-weight: var(--h1fontweight, 900); line-height: 100%; letter-spacing: var(--h1letterspacing, 0); text-transform: var(--h1texttransform, uppercase); } /* ===== Footer v2 (2026-10-19, v0.6.1): one top-to-bottom flow on every page. ===== Candidate and volunteer sign-ups sit side by side as peers, then Stay Connected runs full width below a rule. Every block reads the same way (heading, then its action), and the band shares the edges of Neve's footer container (1170px, 15px gutters) so the menu below lines up with it. Overrides the side-by-side rules above. */ .cc-footer-band { display: block; max-width: 1170px; padding: 2.5rem 15px 2.25rem; } .cc-signup-twins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; } .cc-signup-twins > div { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; } .cc-signup-twins h3, .cc-stay-connected h2 { font-size: 1.5rem !important; line-height: 1.1; white-space: normal; text-wrap: balance; margin: 0 !important; } .cc-signup-twins .button { min-width: 16rem; } .cc-stay-connected { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid rgba(22, 53, 91, .25); } .cc-stay-connected h2 { margin-bottom: .45rem !important; } .cc-stay-connected p { max-width: 46rem; font-size: 1rem !important; margin: 0 0 1rem; } /* Form on one row. Labels get a fixed height, so every input and the Submit button share one bottom edge whatever Otter puts under them. */ .cc-stay-connected .otter-form__container { flex-wrap: nowrap; align-items: flex-start; gap: .75rem; } .cc-stay-connected .otter-form__container > .wp-block-group { flex: 2 1 0; gap: .75rem; } .cc-stay-connected .otter-form__container > .wp-block-themeisle-blocks-form-input { flex: 1.4 1 0; } .cc-stay-connected .otter-form-input-label { display: block; height: 1.25rem; line-height: 1.25rem; margin: 0 0 .35rem !important; font-size: .85rem !important; white-space: nowrap; } .cc-stay-connected .otter-form-input-label [class*="required"] { color: inherit !important; } .cc-stay-connected .otter-form-input { height: 2.75rem; box-sizing: border-box; } .cc-stay-connected .otter-form__container > .wp-block-button { margin-top: 1.6rem !important; } .cc-stay-connected .otter-form__container button { height: 2.75rem; padding: 0 1.6rem !important; } /* Footer menu: one row on desktop (Press wrapped onto its own line), with its first word on the band's left edge. */ @media (min-width: 961px) { footer .builder-item:has(#menu-footer-menu) { flex: 1 1 auto !important; max-width: none !important; } footer #menu-footer-menu { flex-wrap: nowrap; margin-left: -14px; } footer #menu-footer-menu a { padding: 10px 12px !important; } } /* Phones: sign-ups stack, and the form goes names on one row, email below, full-width Submit. */ @media (max-width: 760px) { .cc-signup-twins { grid-template-columns: minmax(0, 1fr); } .cc-signup-twins .button, .cc-stay-connected .otter-form__container > .wp-block-button, .cc-stay-connected .otter-form__container button { width: 100% !important; } .cc-stay-connected .otter-form__container { flex-wrap: wrap; } .cc-stay-connected .otter-form__container > .wp-block-group, .cc-stay-connected .otter-form__container > .wp-block-themeisle-blocks-form-input { flex: 1 1 100%; } .cc-stay-connected .otter-form__container > .wp-block-button { margin-top: .25rem !important; } } /* Airtable form embeds (Contact, Candidate Sign Up, Volunteer Sign Up): a loading message sits behind the form until it draws, then assets/form-loader.js hides it. After 10 s without the form, it offers the form in a new tab. */ .cc-form-embed { position: relative; } .cc-form-embed > iframe { position: relative; z-index: 1; } .cc-form-loading { position: absolute; top: 0; left: 0; right: 0; min-height: 14rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2rem 1.5rem; box-sizing: border-box; background: var(--nv-light-bg); border-radius: 20px; color: var(--nv-primary-accent); font-family: "Montserrat", sans-serif; font-size: 1rem; text-align: center; } .cc-form-spinner { width: 2rem; height: 2rem; border: 3px solid color-mix(in srgb, var(--nv-primary-accent) 20%, transparent); border-top-color: var(--nv-primary-accent); border-radius: 50%; animation: cc-form-spin .8s linear infinite; } @keyframes cc-form-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cc-form-spinner { animation: none; } } .cc-form-slow { display: none; font-family: "Noto Serif", Georgia, serif; } .cc-form-slow a { color: var(--nv-primary-accent); font-weight: 700; text-decoration: underline; } .cc-form-embed.is-slow .cc-form-loading { z-index: 2; } .cc-form-embed.is-slow .cc-form-slow { display: block; } .cc-form-embed.is-loaded .cc-form-loading { display: none; } /* History timeline, bigger pass 2026-10-19 (theme 0.6.3): full 1200px content column, ~10rem bars, about double the type. Phones scroll the timeline inside its own box; the page itself never scrolls sideways. */ .cc-tl-section .cc-tl-h, .cc-tl-section .cc-tl-scroll, .cc-tl-section .cc-tl-key { max-width: min(1200px, 100%) !important; } .cc-tl-section .cc-tl-h { font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important; margin-bottom: 1rem !important; } .cc-tl-scroll { width: 100%; overscroll-behavior-x: contain; } .cc-tl { grid-template-columns: repeat(10, minmax(7rem, 1fr)); min-width: 70rem; } .cc-tl li { padding: 0 .6rem; } .cc-tl-plot { height: 10rem; } .cc-tl-bar { border-radius: 3px 3px 0 0; } .cc-tl time { padding-top: .35rem; border-top-width: 3px; font-size: 2.1rem; } .cc-tl h3 { margin-top: .35rem !important; font-size: 1.3rem !important; } .cc-tl-n { margin-top: .4rem !important; font-size: 1.1rem !important; line-height: 1.35 !important; } .cc-tl-key { margin-top: .9rem !important; font-size: 1rem !important; } /* ===== Oct 21 batch (theme 0.6.4). ===== */ /* Candidates "Our Impact" grid: quotes open in place (assets/photo-grid.js, grid class cc-grid--inplace). A quote-mark badge marks each photo with a quote; the open card is navy. Wider screens: the card covers a 2x2 block over its neighbors (opening left/up at the grid's right/bottom edge), so nothing moves. Phones: it spans the full row. Tile order is hand-set: markup order on desktop, the cc-m* order classes on phones. */ .cc-grid--inplace { grid-auto-flow: row dense; } .cc-grid--inplace figure.has-quote { outline: none; } .cc-grid--inplace figure.has-quote:focus-visible { box-shadow: inset 0 0 0 4px var(--nv-site-bg); } .cc-qbadge { position: absolute; top: 6px; right: 6px; z-index: 2; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; padding-top: .45rem; box-sizing: border-box; border-radius: 50%; background: var(--nv-primary-accent); color: var(--nv-site-bg); font-family: "Noto Serif", Georgia, serif; font-weight: 700; font-size: 1.5rem; line-height: 1; pointer-events: none; } .cc-qclose { display: none; } .cc-grid--inplace figure.is-open { z-index: 3; overflow: visible; } .cc-grid--inplace figure.is-open .cc-qbadge { display: none; } .cc-grid--inplace figure.is-open img { visibility: hidden; } /* the card covers it; the 1.1 zoom would peek out past the tile */ .cc-grid--inplace figure.is-open figcaption { opacity: 1; top: 0; left: 0; right: auto; bottom: auto; width: calc(200% + 4px); height: calc(200% + 4px); box-sizing: border-box; box-shadow: 0 6px 18px rgba(22, 53, 91, .3); display: flex; flex-direction: column; justify-content: center; padding: 1.1rem 1.25rem; background: var(--nv-primary-accent); overflow: auto; font-size: .85rem; } .cc-grid--inplace figure.is-open figcaption strong { font-size: 1.25rem; padding-right: 1.5rem; } .cc-grid--inplace figure.is-open .cc-role { display: block !important; margin-top: .15rem; color: var(--nv-site-bg); } .cc-grid--inplace figure.is-open .cc-quote { position: static; width: auto; height: auto; clip: auto; white-space: normal; display: block; margin-top: .6rem; font-family: "Noto Serif", Georgia, serif; font-size: clamp(.85rem, 1.05vw, 1rem); line-height: 1.45; } .cc-grid--inplace figure.is-open.open-left figcaption { left: auto; right: 0; } .cc-grid--inplace figure.is-open.open-up figcaption { top: auto; bottom: 0; } .cc-grid--inplace figure.is-open .cc-qclose { display: block; position: absolute; top: .35rem; right: .6rem; font-size: 1.6rem; line-height: 1; color: var(--nv-site-bg); } @media (max-width: 760px) { .cc-grid--inplace .cc-m1 { order: 1; } .cc-grid--inplace .cc-m2 { order: 2; } .cc-grid--inplace .cc-m3 { order: 3; } .cc-grid--inplace .cc-m4 { order: 4; } .cc-grid--inplace .cc-m5 { order: 5; } .cc-grid--inplace .cc-m6 { order: 6; } .cc-grid--inplace .cc-m7 { order: 7; } .cc-grid--inplace .cc-m8 { order: 8; } .cc-grid--inplace .cc-m9 { order: 9; } .cc-grid--inplace .cc-m10 { order: 10; } .cc-grid--inplace .cc-m11 { order: 11; } .cc-grid--inplace .cc-m12 { order: 12; } .cc-grid--inplace .cc-m13 { order: 13; } .cc-grid--inplace .cc-m14 { order: 14; } .cc-grid--inplace .cc-m15 { order: 15; } /* 0.8.7: the 3x5 grid */ .cc-grid--inplace .cc-mwide { grid-column: span 2; aspect-ratio: 2 / 1 !important; } .cc-grid--inplace figure.is-open { grid-column: 1 / -1; aspect-ratio: auto !important; overflow: hidden; background: var(--nv-primary-accent); } .cc-grid--inplace figure.is-open img { display: none; } .cc-grid--inplace figure.is-open figcaption { position: static; width: auto; height: auto; box-shadow: none; font-size: .85rem; } .cc-grid--inplace figure.is-open figcaption strong { font-size: 1.15rem; } .cc-qbadge { top: 4px; right: 4px; width: 1.35rem; height: 1.35rem; font-size: 1.25rem; padding-top: .38rem; } } /* Candidates "Causes": one short descriptor under each stacked video. */ .cc-video-desc { margin: .5rem 0 0; color: var(--nv-light-bg); font-family: "Noto Serif", Georgia, serif; font-size: 1rem; line-height: 1.4; } .cc-causes-intro a { color: inherit; text-decoration: underline; font-weight: 700; } @media (max-width: 760px) { .cc-video-desc { padding: 0 1rem; } } /* the videos run edge to edge on phones; the text keeps a gutter */ /* Volunteers "Find your path": the tile shows the skill; hover, focus or a tap reveals what it does for a candidate ("Help a candidate:" + the line). assets/photo-grid.js makes each tile a toggle button (aria-expanded) with a "+" cue; on touch screens the tap toggles .is-open, and the sticky tap-hover is neutralized so only .is-open reveals. */ .cc-path-cue { position: absolute; top: .45rem; right: .6rem; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--nv-primary-accent); transition: transform .15s; pointer-events: none; } .cc-path:hover .cc-path-cue, .cc-path:focus .cc-path-cue, .cc-path.is-open .cc-path-cue { color: var(--nv-light-bg); } .cc-path.is-open .cc-path-cue { transform: rotate(45deg); } .cc-path.is-open { background: var(--nv-primary-accent); } .cc-path.is-open h3 { color: var(--nv-light-bg) !important; font-size: 1.05rem !important; margin-bottom: .45rem !important; } .cc-path.is-open .cc-path-lead { display: block; color: var(--nv-site-bg); } .cc-path.is-open .cc-path-desc { display: block; color: var(--nv-light-bg); } .cc-path .cc-path-lead { margin: 0 0 .2rem !important; } @media (hover: none) { .cc-path .cc-path-lead, .cc-path .cc-path-desc, .cc-path:not(.is-open):hover :is(.cc-path-lead, .cc-path-desc), .cc-path:not(.is-open):focus :is(.cc-path-lead, .cc-path-desc), .cc-path:not(.is-open):focus-within :is(.cc-path-lead, .cc-path-desc) { display: none; } .cc-path { aspect-ratio: 16 / 10; } .cc-path:not(.cc-path--cta):not(.is-open):hover, .cc-path:not(.cc-path--cta):not(.is-open):focus, .cc-path:not(.cc-path--cta):not(.is-open):focus-within { background: var(--nv-site-bg); } .cc-path:not(.cc-path--cta):not(.is-open):hover h3, .cc-path:not(.cc-path--cta):not(.is-open):focus h3, .cc-path:not(.cc-path--cta):not(.is-open):focus-within h3 { color: var(--nv-primary-accent); font-size: 1.15rem !important; margin: 0 !important; } .cc-path:not(.is-open):hover .cc-path-cue, .cc-path:not(.is-open):focus .cc-path-cue { color: var(--nv-primary-accent); } .cc-path.is-open .cc-path-lead, .cc-path.is-open .cc-path-desc { display: block; } } /* History timeline scroll cue (assets/timeline.js): edge fades plus chevron buttons, only where the timeline scrolls. */ .cc-tl-wrap { position: relative; max-width: min(1200px, 100%); margin: 0 auto; } .cc-tl-wrap.can-scroll .cc-tl-scroll { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 3.5rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 3.5rem), transparent 100%); } .cc-tl-wrap.can-scroll.at-start .cc-tl-scroll { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent 100%); } .cc-tl-wrap.can-scroll.at-end .cc-tl-scroll { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem); mask-image: linear-gradient(to right, transparent 0, #000 2.5rem); } .cc-tl-nav { display: none; position: absolute; top: 5rem; z-index: 2; width: 2.25rem; height: 2.25rem; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--nv-primary-accent); color: var(--nv-light-bg); box-shadow: 0 1px 4px rgba(22, 53, 91, .25); cursor: pointer; } .cc-tl-nav:focus-visible { outline: 3px solid var(--nv-light-bg); outline-offset: 2px; } .cc-tl-nav--prev { left: 0; } .cc-tl-nav--next { right: 0; } .cc-tl-wrap.can-scroll .cc-tl-nav { display: flex; } .cc-tl-wrap.at-start .cc-tl-nav--prev, .cc-tl-wrap.at-end .cc-tl-nav--next { display: none; } @media (prefers-reduced-motion: no-preference) { .cc-tl-wrap.can-scroll.at-start .cc-tl-nav--next { animation: cc-tl-nudge 1.6s ease-in-out 1s 2; } } @keyframes cc-tl-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } /* ===== 0.6.7 White direction (Alan's feedback, Jennie + Alex, 2026-10-20) ===== True white replaces cream (--nv-light-bg above) and the light-blue page and header, so the two-color logo can sit on it. Light blue stays as an accent and as the band colour for numbers and sign-ups: Home stats, About history, the footer band. Outlines keep cream-era boxes visible on white. */ html body, html body .wrapper, html body .neve-main { background-color: #ffffff; } header.header, header.header .header--row, header.header .header--row-inner, header .header-main, header .header-main-inner { background: #ffffff !important; background-color: #ffffff !important; } .cc-stats-section { background: var(--nv-site-bg); } .cc-tl-section, .cc-footer-band { background: var(--nv-site-bg) !important; box-shadow: 0 0 0 100vmax var(--nv-site-bg); clip-path: inset(0 -100vmax); } /* full-bleed band behind a centred column */ .cc-press-box { background: #ffffff; border: 2px solid var(--nv-site-bg); } .cc-form-embed { border: 2px solid var(--nv-site-bg); border-radius: 12px; overflow: hidden; } /* Volunteers: "Who you'll help" on a green band; the photo is taller than the band so the row doesn't read as one more grid cell. */ .cc-photo-row { background: var(--nv-c-2) !important; padding: 2.5rem clamp(1rem, 4vw, 3rem) !important; margin: 5.5rem 0 !important; overflow: visible !important; position: relative; z-index: 2; } .cc-photo-row .cc-split-a img { height: 560px; margin: -5rem auto; position: relative; z-index: 3; border-radius: 22px; } @media (max-width: 860px) { .cc-photo-row { margin: 3.5rem 0 !important; } .cc-photo-row .cc-split-a img { height: 420px; margin: -3.5rem auto 0; } } /* Home hero slideshow (since 0.6.9): two candidate slides, 8s each, crossfading (no plugin). Each slide links to that candidate on the Candidates map (/candidates/?map=#impact-map). The first slide is the cc-hero-img (fetched first) and sets the frame at the photos' own 1920x1346 shape, so the caption and name tag are never cropped. The second sits on top and is hidden, not just transparent, while it is off, so a click opens the slide you can see. Reduced motion shows the first slide only. */ .cc-hero-slides { position: relative; margin: 0 !important; } .cc-hero-slides > .wp-block-group__inner-container { position: relative; } .cc-hero-slides figure { margin: 0 !important; } .home .cc-hero-slides img { max-height: none !important; height: auto; aspect-ratio: 1920 / 1346; object-fit: cover; object-position: 50% 50% !important; } .cc-hero-slides .cc-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; animation: 16s linear infinite; } .cc-hero-slides .cc-hero-slide img { width: 100%; height: 100% !important; } .cc-hero-slides .cc-hero-slide--2 { animation-name: cc-hero-2; } @keyframes cc-hero-2 { 0%, 45% { opacity: 0; visibility: hidden; } 50%, 95% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .cc-hero-slides .cc-hero-slide { animation: none; opacity: 0; visibility: hidden; } } /* With assets/hero-slides.js (since 0.7.2): JS drives the slides like the current site's Gutenslider: the next slide pushes in from the right (700ms ease) and the old one leaves to the left. Only the active and moving slides show. */ .cc-hero-slides--js { overflow: hidden; } .cc-hero-slides--js figure { position: absolute !important; inset: 0; opacity: 1 !important; visibility: hidden; z-index: 0; animation: none !important; will-change: transform; } .cc-hero-slides--js figure:first-of-type { position: relative !important; } .cc-hero-slides--js figure.is-active, .cc-hero-slides--js figure.is-moving { visibility: visible; z-index: 1; } .cc-hero-slides--js figure img { width: 100%; height: 100% !important; } .cc-hero-arrow { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #ffffff; opacity: .6; cursor: pointer; transition: opacity .2s, background .2s; } .cc-hero-arrow--prev { left: 10px; } .cc-hero-arrow--next { right: 10px; } .cc-hero-slides:hover .cc-hero-arrow { opacity: .9; } .cc-hero-arrow:hover, .cc-hero-arrow:focus-visible { opacity: 1; background: rgba(0, 0, 0, .6); } .cc-hero-arrow:focus-visible { outline: 3px solid #33ffa2; outline-offset: 2px; } /* About (1123): one left edge and one heading size; the layout changes by section so the page doesn't read as a grid. Mission = statement · Story = split · History = stacked · Team = reversed split · Partners = stacked. */ .page-id-1123 .wp-block-themeisle-blocks-advanced-columns .innerblocks-wrap { max-width: none !important; padding: 0 !important; } .page-id-1123 .wp-block-themeisle-blocks-advanced-columns { padding: 0 !important; } .page-id-1123 .wp-block-spacer { display: none; } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-187c496f, .page-id-1123 #wp-block-themeisle-blocks-advanced-column-90095443, .page-id-1123 #wp-block-themeisle-blocks-advanced-column-fa6c1a66, .page-id-1123 .cc-tl-section > .wp-block-group__inner-container { max-width: 1200px !important; margin: 0 auto !important; padding: 4.5rem clamp(1rem, 4vw, 3rem) !important; box-sizing: border-box; } .page-id-1123 .cc-tl-section { padding: 0 !important; } .page-id-1123 .neve-main h1.wp-block-heading, .page-id-1123 .neve-main h2.wp-block-heading { text-align: left !important; font-size: clamp(2.2rem, 3.4vw, 3rem) !important; line-height: 1 !important; margin: 0 !important; text-transform: uppercase; } /* Mission: small label with a green dash, then the headline and a supporting line */ .page-id-1123 #wp-block-themeisle-blocks-advanced-column-187c496f { padding-top: 5rem !important; padding-bottom: 5rem !important; } .page-id-1123 .neve-main #wp-block-themeisle-blocks-advanced-column-187c496f h1.wp-block-heading { font-family: "Montserrat", sans-serif !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: .12em; margin-bottom: 1.25rem !important; } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-187c496f h1::before { content: ""; display: inline-block; width: 2.5rem; height: 4px; background: var(--nv-c-2); vertical-align: middle; margin-right: .75rem; } .page-id-1123 .neve-main #wp-block-themeisle-blocks-advanced-column-187c496f p.cc-mission-head { text-align: left !important; font-family: "Sofia Sans Condensed", sans-serif !important; font-weight: 900 !important; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; line-height: 1.1 !important; max-width: 950px; margin: 0 !important; } .page-id-1123 .neve-main #wp-block-themeisle-blocks-advanced-column-187c496f p.cc-mission-sub { text-align: left !important; font-family: "Noto Serif", Georgia, serif !important; font-size: 1.2rem !important; line-height: 1.55 !important; max-width: 720px; margin: 1.25rem 0 0 !important; } /* Story: heading left, text right */ .page-id-1123 #wp-block-themeisle-blocks-advanced-column-90095443 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 3.5rem; row-gap: 1.25rem; align-items: start; } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-90095443 > p { text-align: left !important; font-size: 1.2rem !important; line-height: 1.6 !important; margin: 0 !important; } /* History: heading on top, the timeline full width */ .page-id-1123 .cc-tl-section h2.wp-block-heading { margin-bottom: 1.5rem !important; } .page-id-1123 .cc-tl-section p.cc-tl-key { text-align: left !important; } /* Team: photos first, heading and a line on the right */ .page-id-1123 .cc-grid-section { max-width: 1200px !important; margin: 0 auto !important; padding: 5rem clamp(1rem, 4vw, 3rem) !important; box-sizing: border-box; background: #ffffff; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; grid-template-areas: "grid intro" !important; column-gap: 3.5rem !important; align-items: center !important; } .page-id-1123 .cc-grid-intro p { margin: 1rem 0 0 !important; font-family: "Noto Serif", Georgia, serif; font-size: 1.15rem; line-height: 1.5; color: var(--nv-primary-accent); } /* Partners: heading and intro on top, then the logos; a thin rule separates it from Team */ .page-id-1123 #wp-block-themeisle-blocks-advanced-column-fa6c1a66 { border-top: 2px solid var(--nv-site-bg); } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-fa6c1a66 > p { text-align: left !important; font-size: 1.2rem !important; line-height: 1.6 !important; margin: 1rem 0 2rem !important; max-width: 640px; } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-fa6c1a66 > p.cc-press-link { margin: 1.5rem 0 0 !important; font-size: 1rem !important; } .page-id-1123 .cc-logos > .wp-block-group__inner-container { justify-content: space-between !important; } @media (max-width: 860px) { .page-id-1123 #wp-block-themeisle-blocks-advanced-column-90095443 { grid-template-columns: minmax(0, 1fr); } .page-id-1123 .cc-grid-section { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "intro" "grid" !important; } } /* ===== 0.6.8 Airtable form frames sized to the forms (Alex, 2026-10-21) ===== An Airtable embed can't size itself (cross-origin), so each frame is set to its form's measured height plus about 10px: desktop at the frame width each page gives it, phones (and anything under 1000px) at the taller stacked layout. Measured 2026-10-21: contact 720 / 944, candidate 3241 / 5249, volunteer 1897 / 2989 px. Re-measure after a form gains or loses fields. The frame sits 3rem above the footer band instead of on a spacer. */ .cc-form-embed { margin-bottom: 3rem; box-sizing: border-box; max-width: 100%; } .cc-form-embed > iframe { width: 100% !important; max-width: 100%; } .page-id-1546 .neve-main .wp-block-spacer, .page-id-1542 .neve-main .wp-block-spacer { display: none; } html body iframe.cpc-contact-embed { height: 730px !important; } html body iframe.cpc-cand-embed { height: 3255px !important; } html body iframe.cpc-vol-embed { height: 1905px !important; } @media (max-width: 999px) { html body iframe.cpc-contact-embed { height: 955px !important; } html body iframe.cpc-cand-embed { height: 5400px !important; } html body iframe.cpc-vol-embed { height: 3090px !important; } .page-id-1542 .cc-form-embed, .page-id-1544 .cc-form-embed { margin: 0 1rem 3rem; max-width: calc(100% - 2rem); } /* keep the outline off the screen edge, like Contact */ } /* ===== 0.7.1 Stat bank on the site (Alex + Jennie, 2026-10-21) ===== Home stats: a small line icon above each number (ballot box, people, capitol), with tighter padding so the band stays about as tall as before. Candidates: "Why we work down-ballot" (74% waffle). Volunteers: the no-paid-staff card in the green band. Every figure cites its Talking Points row in staging-scripts/oct21g-stat-bands.php. */ .cc-stats-section { padding-top: 1rem !important; padding-bottom: 1rem !important; } .cc-stats .cc-ico { display: block; width: 30px; height: 30px; margin: 0 auto .3rem; color: var(--nv-primary-accent); } .cc-stats .cc-label { margin-top: .2rem; } .cc-ico path, .cc-ico circle { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cc-why-ballot { max-width: 1200px; margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 3rem); box-sizing: border-box; color: var(--nv-primary-accent); } .cc-eyebrow { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; } .cc-eyebrow::before { content: ""; display: inline-block; width: 2.5rem; height: 4px; background: var(--nv-c-2); vertical-align: middle; margin-right: .75rem; } .cc-wb-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 1.5rem 3rem; align-items: center; } .cc-wb-big { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: clamp(5rem, 12vw, 9rem); line-height: .82; letter-spacing: -.02em; } .cc-wb-big sup { font-size: .5em; vertical-align: top; position: relative; top: .1em; } .cc-wb-lede { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.05; margin: .6rem 0 .6rem; max-width: 30rem; } .cc-why-ballot p { font-family: "Noto Serif", Georgia, serif; font-size: 1.1rem; line-height: 1.55; margin: 0; max-width: 36rem; } .cc-waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; } .cc-waffle i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--nv-site-bg); } .cc-waffle i.c { background: #fff; box-shadow: inset 0 0 0 2px var(--nv-primary-accent); } .cc-waffle-key { display: flex; gap: 1.1rem; margin-top: .7rem; font-family: "Montserrat", sans-serif; font-size: .78rem; } .cc-waffle-key span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; background: var(--nv-site-bg); } .cc-waffle-key span.c::before { background: #fff; box-shadow: inset 0 0 0 2px var(--nv-primary-accent); } .cc-waffle-key em { margin-left: auto; font-style: normal; } .cc-wb-pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.5rem; border-top: 3px solid var(--nv-site-bg); } .cc-wb-pair > div { padding: 1rem 1.75rem 0 0; } .cc-wb-pair > div + div { padding-left: 1.75rem; border-left: 1px solid #cfe9fb; } .cc-wb-mid { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: clamp(3rem, 6vw, 4.25rem); line-height: 1; } .cc-wb-mid em { font-style: normal; color: var(--nv-site-bg); } .cc-wb-pair p { margin-top: .4rem; } .cc-src { font-family: "Montserrat", sans-serif !important; font-size: .72rem !important; line-height: 1.45 !important; opacity: .8; margin-top: 1rem !important; max-width: none !important; } @media (max-width: 760px) { .cc-wb-top, .cc-wb-pair { grid-template-columns: minmax(0, 1fr); } .cc-wb-pair > div + div { padding-left: 0; border-left: 0; border-top: 1px solid #cfe9fb; } .cc-wb-pair > div { padding-bottom: 1rem; } } .cc-staff-card { display: flex; gap: 1.25rem; align-items: center; background: #fff; border-radius: 12px; padding: .8rem 1.1rem; margin: .9rem 0 .4rem; max-width: 36rem; color: var(--nv-primary-accent); } .cc-staff-card svg { flex: none; width: 92px; height: 92px; } .cc-staff-card .cc-sc-head { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; } .cc-staff-card .cc-sc-body { font-family: "Noto Serif", Georgia, serif; font-size: .98rem; line-height: 1.45; margin-top: .35rem; } .cc-photo-row .cc-src { color: var(--nv-primary-accent); max-width: 36rem !important; margin-top: .5rem !important; } @media (max-width: 560px) { .cc-staff-card { flex-direction: column; align-items: flex-start; } .cc-staff-card svg { width: 96px; height: 96px; } } /* ===== 0.7.3 Jennie's v2 notes (2026-10-21) ===== */ /* Home stats: no icons. Each stat is a white rectangle on a white band with a light-blue outline; the number is light blue, the words navy. Scoped to the Home band so the Press Room's at-a-glance stats keep their look. */ .cc-stats-section { background: #ffffff !important; padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; } .cc-stats-section .cc-ico { display: none; } .cc-stats-section .cc-stats { gap: 1rem 1.25rem; align-items: stretch; } .cc-stats-section .cc-stats > div { flex: 1 1 14rem; max-width: 19rem; box-sizing: border-box; padding: 1.1rem 1rem 1.2rem; background: #ffffff; border: 2px solid var(--nv-site-bg); border-radius: 6px; } .cc-stats-section .cc-stats .cc-num { color: var(--nv-site-bg); } .cc-stats-section .cc-stats .cc-label, .cc-stats-section .cc-stats .cc-sub { color: var(--nv-primary-accent); } /* Quote cards (Home "Why we do this", Candidates, spotlights): the role line under the name, e.g. "Project Manager - Volunteer since 2021", in semibold so it doesn't read thin. */ .cc-grid .cc-role, .cc-grid-spot .cc-role { font-weight: 600 !important; } /* Candidates "Why we work down-ballot": the label about 4pt larger, ~80% as the hero number with a bar instead of the 100-square waffle; 74% and 90% move to the pair below. */ .cc-why-ballot .cc-eyebrow { font-size: 1.2rem; } .cc-wb-big .cc-wb-tilde { font-size: .55em; vertical-align: top; position: relative; top: .12em; margin-right: .04em; } .cc-wb-bar { display: flex; height: 4.5rem; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--nv-primary-accent); } .cc-wb-bar span { display: flex; align-items: center; padding: 0 .9rem; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.6rem; line-height: 1; white-space: nowrap; } .cc-wb-bar .r { flex: 0 0 80%; background: var(--nv-site-bg); color: var(--nv-primary-accent); } .cc-wb-bar .o { flex: 1 1 auto; justify-content: center; padding: 0; font-size: 1.1rem; } .cc-wb-top + .cc-wb-pair .cc-wb-mid em { color: var(--nv-site-bg); } /* Candidates Causes: one video now, so it gets the full column. */ .cc-video-stack > div:only-child { max-width: none; } /* About history: full width on desktop, so the scroll bar only shows when the years truly don't fit; phones still scroll. Each count stays on one line with its label ("100 served"), whatever the column width. */ .cc-tl-n { white-space: nowrap; } .cc-tl { grid-template-columns: repeat(10, minmax(min-content, 1fr)); } @media (min-width: 1024px) { .cc-tl-section .cc-tl-wrap, .cc-tl-section .cc-tl-scroll { max-width: none !important; } .cc-tl-section .cc-tl-wrap { margin-left: max(calc(50% - 50vw + 2rem), -200px); margin-right: max(calc(50% - 50vw + 2rem), -200px); } .cc-tl { min-width: 0; } .cc-tl li { padding: 0 .5rem; } .cc-tl-n { font-size: 1rem !important; } } /* ===== 0.7.4 Alan's design notes (2026-10-21) ===== */ /* One left edge on every page. The site column is 1200px with a gutter of clamp(1rem, 4vw, 3rem) inside it (the About page already used it), so content starts at max(gutter, (width - 1200px) / 2 + gutter). The header logo's ink, the footer and every full-width band now start on that edge; before, some bands centred a 1200px box inside their padding (content sat left of the logo) and the Home hero column added 128px (right of it). Centred blocks (Contact, the sign-up pages) keep their own narrower widths. */ html:root { --cc-gutter: clamp(1rem, 4vw, 3rem); --cc-col: calc(1200px - 2 * var(--cc-gutter)); } /* Header and footer rows: Neve's 1170px container becomes the site column. The builder item's 15px padding cancels the row's -15px margin, so the item's content starts on the edge. */ header.header .header--row-inner > .container, footer .footer--row-inner > .container { max-width: none !important; padding-left: var(--cc-gutter) !important; padding-right: var(--cc-gutter) !important; } header.header .header--row-inner > .container > .row, footer .footer--row-inner > .container > .row { max-width: calc(var(--cc-col) + 30px); margin-left: auto !important; margin-right: auto !important; } @media (max-width: 1260px) { header.header .header--row-inner > .container > .row, footer .footer--row-inner > .container > .row { margin-left: -15px !important; margin-right: -15px !important; } } /* Logo a little bigger (Alan): 220 → 250px on desktop, with tablet and phone scaled to match. The SVG has 100 units of empty space on each side of its 1244-unit width (8.04%), so a negative margin puts the ink, not the box, on the edge. */ html .builder-item--logo { --maxwidth: 185px; } @media (min-width: 576px) { html .builder-item--logo { --maxwidth: 200px; } } @media (min-width: 960px) { html .builder-item--logo { --maxwidth: 250px; } } header .site-logo img { margin-left: calc(var(--maxwidth) * -0.0804) !important; } /* Full-width bands (cc-band, cc-paths, cc-photo-row, the quote grids): gutter on the band, the content box capped at the column. */ .cc-band, .cc-paths, .cc-photo-row, .cc-grid-section:not(.page-id-1123 *) { padding-left: var(--cc-gutter) !important; padding-right: var(--cc-gutter) !important; } .cc-band > .wp-block-group__inner-container, .cc-paths > .wp-block-group__inner-container, .cc-photo-row > .wp-block-group__inner-container { max-width: var(--cc-col) !important; margin-left: auto !important; margin-right: auto !important; } .cc-hero--stacked > .wp-block-group__inner-container > * { max-width: none; } body:not(.page-id-1123) .cc-grid-section:not(.cc-grid-section--stacked) { padding-left: max(var(--cc-gutter), calc((100% - var(--cc-col)) / 2)) !important; padding-right: max(var(--cc-gutter), calc((100% - var(--cc-col)) / 2)) !important; } .cc-grid-section--stacked .cc-grid, .cc-grid-section--stacked .cc-grid-intro { max-width: var(--cc-col) !important; } /* Otter column blocks outside About: same gutter, and the inner row is never wider than the column. */ body:not(.page-id-1123) :is(.neve-main, .nv-content-wrap) > .wp-block-themeisle-blocks-advanced-columns { padding-left: var(--cc-gutter) !important; padding-right: var(--cc-gutter) !important; } body:not(.page-id-1123) :is(.neve-main, .nv-content-wrap) > .wp-block-themeisle-blocks-advanced-columns > .innerblocks-wrap { max-width: min(var(--columns-width, 100%), var(--cc-col)) !important; } .home #wp-block-themeisle-blocks-advanced-column-187c496f { padding-left: 0 !important; } /* the hero text column's 128px inset */ /* The site-wide sign-up band and the Contact form frame on the same column. */ .cc-footer-band { width: 100%; max-width: none !important; padding-left: max(var(--cc-gutter), calc((100% - var(--cc-col)) / 2)) !important; padding-right: max(var(--cc-gutter), calc((100% - var(--cc-col)) / 2)) !important; } @media (min-width: 1001px) { html body .cpc-contact-wrap { width: min(var(--cc-col), calc(100vw - 2 * var(--cc-gutter))) !important; } } /* Every call-to-action button in the header DONATE style (Alan): green fill, navy type, a navy edge on hover. On navy bands the hover edge is white; on green surfaces the button flips to navy with green type so it doesn't vanish. The Airtable forms' own Submit buttons sit inside their frames and can't be styled from here. */ .neve-main .wp-block-button__link, .cc-signup-twins .button, .cc-stay-connected button, .cc-path-cta a { font-family: "Sofia Sans Condensed", sans-serif !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: .02em; color: var(--nv-primary-accent) !important; background: var(--nv-c-2) !important; border: 2px solid transparent !important; border-radius: 7px !important; text-decoration: none !important; transition: border-color .3s, background-color .15s, color .15s; } .neve-main .wp-block-button__link:hover, .neve-main .wp-block-button__link:focus-visible, .cc-signup-twins .button:hover, .cc-signup-twins .button:focus-visible, .cc-stay-connected button:hover, .cc-stay-connected button:focus-visible, .cc-path-cta a:hover, .cc-path-cta a:focus-visible { background: var(--nv-c-2) !important; color: var(--nv-primary-accent) !important; border-color: var(--nv-primary-accent) !important; } .cc-band--navy .wp-block-button__link:hover, .cc-band--navy .wp-block-button__link:focus-visible, .cc-btn-light .wp-block-button__link:hover { border-color: #ffffff !important; } :is(.cc-photo-row, .cc-tile--cta, .cc-path--cta, .has-nv-c-2-background-color) :is(.wp-block-button__link, .cc-path-cta a) { background: var(--nv-primary-accent) !important; color: var(--nv-c-2) !important; } :is(.cc-photo-row, .cc-tile--cta, .cc-path--cta, .has-nv-c-2-background-color) :is(.wp-block-button__link, .cc-path-cta a):hover { background: var(--nv-primary-accent) !important; color: var(--nv-c-2) !important; border-color: #ffffff !important; } /* Phones: the footer copyright and committee lines centre on the screen. The old Additional CSS splits the footer rows 3fr/1fr under 600px, which pushed the centred text off-centre; the text itself is unchanged. */ @media (max-width: 960px) { footer [id$="-main"] .footer--row-inner .row { grid-template-columns: minmax(0, 1fr) !important; } footer .builder-item--footer-three-widgets, footer .builder-item--footer-three-widgets p { text-align: center !important; } } /* About: Story and Team headings on the left edge, above their content, like History and Partners (Alan). They were splits with the heading beside the copy (Team's on the right). Mission keeps Jennie's label-and-headline treatment. */ .page-id-1123 #wp-block-themeisle-blocks-advanced-column-90095443 { grid-template-columns: minmax(0, 1fr) !important; max-width: 1200px; } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-90095443 > p { max-width: 900px; } .page-id-1123 .cc-grid-section { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "intro" "grid" !important; row-gap: 1.5rem !important; align-items: start !important; } .page-id-1123 .cc-grid-intro p { margin-top: 1rem !important; max-width: 640px; } /* Home stats (Jennie, 2026-10-21, later): the light-blue band is back behind the white stat boxes. Numbers stay light blue on white, words navy; the box outline matches the band, so each box reads as a white card. */ .cc-stats-section { background: var(--nv-site-bg) !important; } /* ===== 0.7.5 Home stats: four white boxes on the light-blue band, geographic reach first (Alex, 2026-10-21). One row on desktop (the boxes shrink to fit the column), 2x2 on phones. ===== */ @media (max-width: 600px) { .cc-stats-section .cc-stats--4 > div { flex: 1 1 calc(50% - .625rem); max-width: none; padding: .9rem .6rem 1rem; } .cc-stats-section .cc-stats--4 .cc-label { font-size: 1.05rem; } } /* ===== 0.7.6 Candidates "Why we work down-ballot": the one-name ballot (Jennie's pick, 2026-10-21 v3: "more graphic, less bar chart-y"). A ballot for a local race with one candidate and an UNCONTESTED stamp, beside 74% (local), 90% (regional) and ~80% (uncontested partisan races won by Republicans). The ~80% has a different base from 74/90, so it never shares a scale with them. Mockup: project files website-stats/22a. Light blue is only a fill here, never text on white. ===== */ .cc-why-ballot--ballot { overflow-x: clip; } .cc-why-ballot--ballot .cc-wb-top { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 2rem 4rem; } .cc-ballot { padding: 1.25rem 1.75rem 1.75rem .5rem; } .cc-ballot-card { position: relative; background: #ffffff; border: 3px solid var(--nv-primary-accent); border-radius: 6px; box-shadow: 10px 12px 0 var(--nv-site-bg); transform: rotate(-2.5deg); font-family: "Montserrat", sans-serif; color: var(--nv-primary-accent); } .cc-ballot-h { background: var(--nv-primary-accent); color: #ffffff; font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; padding: .75rem 1.4rem; } .cc-ballot-t { padding: 1.2rem 1.4rem .5rem; border-bottom: 2px solid var(--nv-primary-accent); } .cc-ballot-t span { display: block; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: 1; } .cc-ballot-t small, .cc-ballot-r small { font-style: italic; font-size: .8rem; } .cc-ballot-t small { display: block; margin-top: .35rem; } .cc-ballot-r { display: flex; align-items: center; gap: 1.1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid #c9d3de; } .cc-ballot-r:last-of-type { border-bottom: 0; padding-bottom: 1.6rem; } .cc-ballot-r i { flex: none; width: 2.5rem; height: 1.5rem; border-radius: 50%; border: 3px solid var(--nv-primary-accent); } .cc-ballot-r i.f { background: var(--nv-primary-accent); } .cc-ballot-r b { font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.6rem; line-height: 1; } .cc-ballot-r em { margin-left: auto; font-style: normal; font-weight: 700; font-size: .9rem; } .cc-ballot-r small { margin-left: auto; white-space: nowrap; color: #4b5d72; } .cc-ballot-blank { flex: 1; height: 1.1rem; border-bottom: 3px dashed #9aa8b8; } .cc-ballot-stamp { position: absolute; right: -1.9rem; top: 16.4rem; transform: rotate(-8deg); background: #ff7866; color: var(--nv-primary-accent); border: 3px solid var(--nv-primary-accent); box-shadow: 4px 4px 0 var(--nv-primary-accent); padding: .35rem 1.25rem; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; text-transform: uppercase; font-size: 2.5rem; line-height: 1.1; letter-spacing: .04em; } .cc-why-ballot--ballot .cc-wb-big { font-size: clamp(6rem, 13vw, 11.5rem); } .cc-why-ballot--ballot .cc-wb-lede { font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin: .9rem 0 1.6rem; } .cc-why-ballot--ballot .cc-wb-pair { border-top: 4px solid var(--nv-primary-accent); margin: 0 0 1.6rem; } .cc-why-ballot--ballot .cc-wb-pair > div + div { border-left-color: #dbe3ec; } .cc-why-ballot--ballot .cc-wb-mid { font-size: clamp(3rem, 5vw, 4.25rem); } .cc-why-ballot--ballot .cc-wb-hot .cc-wb-mid { display: inline-block; background: var(--nv-primary-accent); color: var(--nv-c-2); padding: .1em .3em 0; } .cc-why-ballot--ballot p.cc-wb-cap { font-family: "Montserrat", sans-serif; font-size: .95rem; line-height: 1.35; margin-top: .4rem; } @media (max-width: 900px) { .cc-why-ballot--ballot .cc-wb-top { grid-template-columns: minmax(0, 1fr); } .cc-ballot { max-width: 30rem; } } @media (max-width: 480px) { .cc-ballot { padding: 1rem 1.25rem 1.5rem .25rem; } .cc-ballot-t span { font-size: 1.5rem; } .cc-ballot-r { padding: 1rem; gap: .8rem; } .cc-ballot-r b { font-size: 1.25rem; } .cc-ballot-stamp { right: -.75rem; top: 15.4rem; font-size: 1.9rem; } } /* ===== 0.7.7 Home stats: the four boxes sit inside the site column. At 1440px the row ran 82px to 1358px, past the 168px left edge that the logo and every other band use, because each box kept its 19rem cap. The row now takes the column width and the same gutter as the other bands, and the four boxes share it equally. Below 900px the boxes go 2x2, because four in a row leave AMERICANS REPRESENTED too little room. ===== */ .cc-stats-section:has(.cc-stats--4) { padding-left: var(--cc-gutter) !important; padding-right: var(--cc-gutter) !important; } .cc-stats-section .cc-stats--4 { flex-wrap: nowrap; max-width: min(var(--cc-col), 100%); margin-left: auto; margin-right: auto; } .cc-stats-section .cc-stats--4 > div { flex: 1 1 0; min-width: 0; max-width: none; } @media (max-width: 900px) { .cc-stats-section .cc-stats--4 { flex-wrap: wrap; } .cc-stats-section .cc-stats--4 > div { flex: 1 1 calc(50% - .625rem); } } /* ===== 0.8.0 Alan's round 3 (2026-10-21). Appended as one block so it can be added to the server copy as-is. ===== */ /* Secondary buttons kept green on hover. The Customizer's Additional CSS turns `.is-style-secondary` navy on hover while the theme keeps the text navy, so Candidates' hero button went navy-on-navy and vanished. Green surfaces still flip to navy. */ .neve-main .wp-block-button.is-style-secondary .wp-block-button__link:hover, .neve-main .wp-block-button.is-style-secondary .wp-block-button__link:focus-visible { background: var(--nv-c-2) !important; color: var(--nv-primary-accent) !important; } .neve-main :is(.cc-photo-row, .cc-tile--cta, .cc-path--cta, .has-nv-c-2-background-color) .wp-block-button.is-style-secondary .wp-block-button__link:hover { background: var(--nv-primary-accent) !important; color: var(--nv-c-2) !important; } /* Footer Stay Connected: SUBMIT matches the inputs (same top edge, same 44px height) instead of sitting short and high. Otter's wrapper centres the button and drops the earlier height rule, so these win by ID. */ @media (min-width: 761px) { #stay-connected .otter-form__container > .wp-block-button { align-self: flex-start !important; margin-top: 2.25rem !important; padding: 0 !important; height: auto !important; display: block !important; } #stay-connected .otter-form__container .wp-block-button button { display: block; height: 2.75rem !important; min-height: 2.75rem; padding: 0 1.6rem !important; min-width: 10rem; line-height: 1 !important; font-size: 1rem !important; } } @media (max-width: 760px) { #stay-connected .otter-form__container .wp-block-button button { width: 100% !important; max-width: none !important; height: 2.75rem !important; padding: 0 1.6rem !important; line-height: 1 !important; } } /* Contact keeps its own two sign-up buttons above the form, so the footer band drops its copy of them there. The newsletter form stays. */ .page-id-1546 .cc-footer-band .cc-signup-twins { display: none !important; } .page-id-1546 .cc-footer-band .cc-stay-connected { margin-top: 0; padding-top: 0; border-top: 0; } /* ===== 0.8.1 Volunteers top band, Jennie-approved rewrite (2026-10-21; Copy Audit tab "Proposed — Volunteers"). Appended as one block so it can be added to the server copy as-is. The navy band stacks instead of splitting: headline, one line of copy, three "how it works" tags, the sign-up button, a rule, then three reasons in a row. Page HTML: staging-scripts/oct22a-volunteers-top.php. ===== */ .cc-hero--vol .cc-vol-intro { max-width: 52rem; } .cc-hero--vol .cc-vol-intro p { font-size: 1.15rem; max-width: 46rem; margin-bottom: 1.25rem; } ul.cc-vol-tags { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0 0 1.5rem !important; padding: 0 !important; } ul.cc-vol-tags li { margin: 0; padding: .45rem 1rem; border-radius: 999px; background: var(--nv-site-bg); color: var(--nv-primary-accent); font-family: "Montserrat", sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; } .cc-hero--vol .wp-block-buttons { margin: 0; } .cc-hero--vol .cc-reasons--3 { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .3); } .cc-hero--vol .cc-reasons--3 > .wp-block-group__inner-container, .cc-hero--vol .cc-reasons--3:not(:has(> .wp-block-group__inner-container)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2.5rem; } @media (max-width: 860px) { .cc-hero--vol .cc-reasons--3 > .wp-block-group__inner-container, .cc-hero--vol .cc-reasons--3:not(:has(> .wp-block-group__inner-container)) { grid-template-columns: minmax(0, 1fr); } } /* ===== 0.8.2 Alan's round 4 (2026-10-22, alex's calls). Appended as one block so it can be added to the server copy as-is. Three measured values sit in custom properties so the staging check can tune them without touching the rules. ===== */ :root { --cc-submit-top: 2.225rem; /* footer SUBMIT's drop: its bottom edge meets the inputs' bottom edge (measured on staging 2026-10-22; 0.8.0 had 2.25rem) */ --cc-fm-1: 140.1px; /* footer menu: width of the CANDIDATES item, so the second small link starts under VOLUNTEERS (measured on staging 2026-10-22, after removing the Customizer's old 3.1em padding on this item) */ --cc-fm-x: -14px; /* footer menu: the small links' row starts on the same left edge as the row above */ } /* Footer: SUBMIT and the two band buttons are one size (Alan: "size it the same as the other two buttons above it"). */ .cc-signup-twins .button, #stay-connected .otter-form__container .wp-block-button button { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; height: 2.75rem !important; min-height: 2.75rem; min-width: 16rem; padding: 0 1.1rem !important; line-height: 1 !important; } @media (min-width: 761px) { #stay-connected .otter-form__container > .wp-block-button { margin-top: var(--cc-submit-top) !important; } } /* Footer menu: the small links stay (alex). They take the row above's size, spacing and left edge, and each sits under its own section: the first under CANDIDATES, the second under VOLUNTEERS. One line each. */ @media (min-width: 961px) { footer #menu-sub-menu { flex-wrap: nowrap; margin-left: var(--cc-fm-x); font-size: 1.05em !important; } footer #menu-sub-menu a { padding: 10px 12px !important; } footer #menu-sub-menu > li:first-child { min-width: var(--cc-fm-1); box-sizing: border-box; text-align: left; } } /* Contact: the footer band's sign-up pair shows again, so Contact ends like every other page. Its own two buttons stay above the form. Undoes 0.8.0's Contact-only hide. */ .page-id-1546 .cc-footer-band .cc-signup-twins { display: grid !important; } .page-id-1546 .cc-footer-band .cc-stay-connected { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid rgba(22, 53, 91, .25); } /* The two small labels match: Candidates "Why we work down-ballot" was inheriting the section's serif, and About's "Our mission" was a smaller Montserrat. Both are now one style: Montserrat 700 at Jennie's 1.2rem, the same tracking and the same green dash. They stay small labels, as Jennie set them; neither becomes a full heading. */ .cc-why-ballot p.cc-eyebrow, .page-id-1123 .neve-main #wp-block-themeisle-blocks-advanced-column-187c496f h1.wp-block-heading { font-family: "Montserrat", sans-serif !important; font-weight: 700 !important; font-size: 1.2rem !important; letter-spacing: .14em !important; line-height: 1.2 !important; text-transform: uppercase; } /* ===== 0.8.3 Contact tidy (alex, 2026-10-22). Appended as one block so it can be added to the server copy as-is. 1. The two sign-up blocks above the form: "Want to volunteer your skills?" is wider than its column, so it ran off to the right and the pair looked off-centre. Each column is now as wide as the longer heading, the two stay equal, and the pair centres on the page. Phones (700px and under) keep the page's own stacked rule. 2. The Airtable frame was still sized for the older, taller form (730px), which left a blank band under it. The heights sit in custom properties, measured on staging. ===== */ :root { --cc-contact-h: 615px; /* Contact form frame above 999px: outline about 2.5rem below the form's last line (measured at 1440, 2026-10-22); the rest of Airtable's own bottom padding scrolls inside the frame */ --cc-contact-h-m: 890px; /* the same at 999px and under, where the form stacks (measured at 390) */ } html body iframe.cpc-contact-embed { height: var(--cc-contact-h) !important; } @media (max-width: 999px) { html body iframe.cpc-contact-embed { height: var(--cc-contact-h-m) !important; } } @media (min-width: 701px) { /* Fixed equal columns. The pair sits in a 600px Otter column (536px inside its padding), narrower than two copies of "Want to volunteer your skills?" (280px at 1440), so 1fr could not equalise them and that heading overflowed. Two 18rem columns centred with justify-content overhang the column evenly by about 40px a side. */ .page-id-1546 .cc-contact-paths.cc-signup-twins { width: auto; max-width: 100%; grid-template-columns: repeat(2, 18rem); justify-content: center; margin-left: auto; margin-right: auto; } } /* ===== 0.8.4 Footer menu as a plain sitemap (alex, 2026-10-22). Appended as one block so it can be added to the server copy as-is. The two small SIGN UP links under CANDIDATES and VOLUNTEERS (the "sub-menu" menu) are hidden (their widget only: the page links share its footer builder slot), so the navy footer is only the page links. The green buttons in the light-blue band above are the sign-up asks. The 0.8.2 rules that aligned those links (--cc-fm-1, --cc-fm-x) no longer do anything. The menu itself is untouched in WordPress, so removing this block brings the links back. ===== */ footer .widget:has([id^="menu-sub-menu"]), footer [id^="menu-sub-menu"] { display: none !important; } /* only the SIGN UP widget (nav_menu-3); it shares a builder slot with the page links, and Neve prints the footer twice (#menu-sub-menu, #menu-sub-menu-1) */ /* ===== 0.8.5 Candidates hero pills (alex, 2026-10-22; Route A mock website-stats/24). Appended as one block so it can be added to the server copy as-is. `ul.cc-tags` is the shared pill row; it matches the Volunteers `.cc-vol-tags` exactly. Page HTML: staging-scripts/oct22d-candidates-pills.php. ===== */ ul.cc-tags { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0 0 1.5rem !important; padding: 0 !important; } ul.cc-tags li { margin: 0; padding: .45rem 1rem; border-radius: 999px; background: var(--nv-site-bg); color: var(--nv-primary-accent); font-family: "Montserrat", sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; } /* ===== 0.8.6 Outlined pills + About footer spacing (alex, 2026-10-22; mock website-stats/25). Appended as one block so it can be added to the server copy as-is. The Volunteers and Candidates pills become outlines: light-blue border and text, no fill. The padding drops by the border width so the pills stay the same size. The About footer gets its spacer back, because the About-only `.page-id-1123 .wp-block-spacer { display: none }` (meant for the page body) also hid the one between the Privacy Policy line and the committee disclaimer. ===== */ ul.cc-vol-tags li, ul.cc-tags li { background: transparent; color: var(--nv-site-bg); border: 2px solid var(--nv-site-bg); padding: calc(.45rem - 2px) calc(1rem - 2px); } .page-id-1123 :is(footer, .site-footer) .wp-block-spacer { display: block; } /* ===== 0.8.8 Candidates map summary (S16/S15a, 2026-10-27). The text and plain link under the map iframe, so search engines credit the map to this page. Page HTML: staging-scripts/oct27b-map-summary.php. */ #impact-map .cc-map-summary { max-width: 46rem; margin: 1.5rem auto 0; text-align: center; } #impact-map .cc-map-link { margin: .75rem auto 0; text-align: center; font-family: Montserrat, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; } #impact-map .cc-map-link a { color: var(--nv-primary-accent, #162b4d); text-decoration: underline; text-underline-offset: 3px; } /* ===== 0.9.0 alex's Oct 28 staging notes. Appended as one block so it can be added to the server copy as-is. (0.8.9 is the donate-prompts work in PR #1356; this block does not depend on it.) 1. Home: "Help that starts with the message" ran over the paragraph beside it, because 0.6.x kept the old two-line heading on one line each (nowrap). The heading wraps inside its own column now. 2. The GEO "Learn more:" lines (cc-guide-context) sat outside every column, flush to the page edge, with the theme's red link. They sit on the content column now, in the body serif, with a navy underlined link. 3. About: less space between the mission row and Our Story (was 5rem + 4.5rem). Page copy lives in staging-scripts/oct28b-alex-notes.php. ===== */ .cc-help-row h2 { white-space: normal !important; text-wrap: balance; overflow-wrap: break-word; } .neve-main p.cc-guide-context { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 2.5rem auto !important; padding: 0 var(--cc-gutter) !important; text-align: left !important; font-family: "Noto Serif", Georgia, serif; font-size: 1.05rem; line-height: 1.5; color: var(--nv-primary-accent); } .neve-main p.cc-guide-context a { color: var(--nv-primary-accent) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .neve-main p.cc-guide-context a:hover, .neve-main p.cc-guide-context a:focus-visible { text-decoration-thickness: 2px; } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-187c496f { padding-bottom: 2.5rem !important; } .page-id-1123 #wp-block-themeisle-blocks-advanced-column-90095443 { padding-top: 2.5rem !important; } /* ===== 0.9.1 About FAQ + Learn more on the page column (alex, 2026-10-28). The candidate FAQ group (cc-candidate-faq, from the Oct 27 approved-fact-sheet patch) sat outside About's columns: full width, no gutter, text flush to the page edge and long lines cut off. It now sits on the same 1200px column as Our Story and Partners, so its text edge and the "Learn more:" line (p.cc-guide-context, 0.9.0) start on the same left edge. ===== */ .page-id-1123 .cc-candidate-faq { box-sizing: border-box; width: 100%; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; padding-left: var(--cc-gutter) !important; padding-right: var(--cc-gutter) !important; } .page-id-1123 .cc-candidate-faq :is(h2, h3, p) { text-align: left; max-width: 100%; overflow-wrap: break-word; } /* ===== 0.9.2 (Michael Walsh, 2026-10-28; Alex approved the mockups the same night) ===== 1. In-place quotes (Candidates "Our Impact", Home "Why We Do This"; assets/photo-grid.js): the chosen photo stays put, its name bar turns green, and the quote opens in a green card under it, with a notch pointing at the photo. Phones: the card is its own full-width row under the photo's row. Wider screens: it floats over the two tiles below (above on the bottom row, leftward at the right edge). The 0.6.4 navy .is-open card is no longer used. 2. Home: a wide "Social Media Manager" label beside Chelsea, phones only (.cc-tile--phone), so the last row is full. 3. About "Our Partners": the column could not shrink below the logos' one-row width, so on phones the whole section ran off the right edge. min-width: 0 lets the logos wrap. */ .cc-grid--inplace figure.is-sel { box-shadow: inset 0 0 0 4px var(--nv-c-2); z-index: 4; } .cc-grid--inplace figure.is-sel img { transform: none !important; } .cc-grid--inplace figure.is-sel figcaption { opacity: 1 !important; background: var(--nv-c-2) !important; color: var(--nv-primary-accent) !important; } .cc-grid--inplace figure.is-sel .cc-role { color: var(--nv-primary-accent) !important; } .cc-grid--inplace figure.is-sel .cc-qbadge { background: var(--nv-c-2); color: var(--nv-primary-accent); } .cc-qcard { position: relative; box-sizing: border-box; aspect-ratio: auto !important; overflow: visible !important; padding: 1rem 1.1rem 1.1rem; background: var(--nv-c-2); color: var(--nv-primary-accent); text-align: left; cursor: pointer; } .cc-grid > .cc-qcard, .cc-grid > .wp-block-group__inner-container > .cc-qcard { grid-column: 1 / -1; } .cc-qcard strong { display: block; padding-right: 1.75rem; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 900; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; } .cc-qcard .cc-role { display: block !important; margin-top: .15rem; font-size: .8rem; font-weight: 600; color: var(--nv-primary-accent); } .cc-qcard .cc-quote { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; display: block; margin-top: .55rem; font-family: "Noto Serif", Georgia, serif; font-size: .9rem; line-height: 1.45; } .cc-qcard .cc-qclose { display: block; position: absolute; top: .35rem; right: .6rem; font-size: 1.6rem; line-height: 1; color: var(--nv-primary-accent); } .cc-qcard::before { content: ""; position: absolute; top: -9px; left: var(--cc-notch, 1.25rem); border: 9px solid transparent; border-top: 0; border-bottom-color: var(--nv-c-2); } @media (min-width: 761px) { .cc-grid--inplace figure.is-sel { overflow: visible; } .cc-grid--inplace figure.is-sel > .cc-qcard { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; width: calc(200% + 4px); min-height: 100%; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 6px 18px rgba(22, 53, 91, .3); } .cc-grid--inplace figure.is-sel > .cc-qcard::before { left: calc(25% - 9px); } .cc-grid--inplace figure.is-sel.is-wide > .cc-qcard { width: calc(300% + 8px); } .cc-grid--inplace figure.is-sel.is-wide > .cc-qcard::before { left: calc(100% / 6 - 9px); } .cc-grid--inplace figure.is-sel.open-left > .cc-qcard { left: auto; right: 0; } .cc-grid--inplace figure.is-sel.open-left > .cc-qcard::before { left: auto; right: calc(25% - 9px); } .cc-grid--inplace figure.is-sel.open-left.is-wide > .cc-qcard::before { right: calc(100% / 6 - 9px); } .cc-grid--inplace figure.is-sel.open-up > .cc-qcard { top: auto; bottom: calc(100% + 4px); } .cc-grid--inplace figure.is-sel.open-up > .cc-qcard::before { top: auto; bottom: -9px; border-bottom: 0; border-top: 9px solid var(--nv-c-2); } .cc-qcard .cc-quote { font-size: clamp(.85rem, 1.05vw, 1rem); } } .cc-grid .cc-tile--phone { display: none !important; } @media (max-width: 760px) { .cc-grid .cc-tile--phone { display: flex !important; grid-column: span 2; aspect-ratio: auto !important; } } .page-id-1123 .wp-block-themeisle-blocks-advanced-column { min-width: 0; } .page-id-1123 .cc-logos { max-width: 100%; box-sizing: border-box; } /* ===== 0.9.3 Home intro clears the slideshow (alex, 2026-10-29; 0.9.2 is Michael Walsh's quote-card / logo grid block on staging). Appended as one block so it can be added to the server copy as-is. The Oct 27 fact-sheet patch replaced the hero paragraph without its cc-definition class, so it lost the 34rem cap and ran the full text column, right up to the slideshow ("48" touched the photo at 1440px). The paragraph is capped again, and the text column keeps a gutter on its right while the two columns sit side by side (Otter stacks them below 600px, where the page gutter already does the job). ===== */ .home #wp-block-themeisle-blocks-advanced-column-187c496f p { max-width: 34rem; overflow-wrap: break-word; } @media (min-width: 600px) { .home #wp-block-themeisle-blocks-advanced-column-187c496f { padding-right: clamp(1.5rem, 3vw, 3rem) !important; } } /* ===== 0.9.4 About FAQ spacing (alex, 2026-10-29). Appended as one block so it can be added to the server copy as-is. Each question heading (h3) carried the theme's large bottom margin, so its answer floated far below it, while the "Candidate applications and matching" heading (h2) sat tight on its line. Every heading in the FAQ now sits on its answer the way the h2 does, and the space goes above each question instead. ===== */ .page-id-1123 .cc-candidate-faq :is(h2, h3) { margin-bottom: .35rem !important; padding-bottom: 0 !important; } .page-id-1123 .cc-candidate-faq :is(h2, h3) + p { margin-top: 0 !important; } .page-id-1123 .cc-candidate-faq h3 { margin-top: 2.25rem !important; } .page-id-1123 .cc-candidate-faq p { margin-bottom: 0 !important; } .page-id-1123 .cc-candidate-faq p + p { margin-top: .75rem !important; } /* ===== 0.9.5 Button states match the site (alex, 2026-10-30). Appended as one block so it can be added to the server copy as-is. The site standard (0.7.x "header DONATE style"): green fill, navy type, no visible edge at rest, a 2px navy edge on hover or keyboard focus. 1. About: the footer SUBMIT showed a blue line before hover. At rest it now has no border, outline or shadow on every page, wrapper included; hover and keyboard focus keep the navy edge. Pages that already looked right don't change. 2. Home "See our impact": EXPLORE THE MAP is an `is-style-primary` button, and its hover didn't match the rest of the site (the Customizer's Additional CSS loads after this file and styles that class). Rest and hover are pinned to the standard with enough weight to win, the same fix 0.8.0 made for `is-style-secondary`. ===== */ body #stay-connected .otter-form__container > .wp-block-button { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: none !important; } body #stay-connected .otter-form__container .wp-block-button button, body.page-id-1123 .neve-main :is(.otter-form__container button, button[type="submit"]) { background: var(--nv-c-2) !important; color: var(--nv-primary-accent) !important; border: 2px solid transparent !important; outline: 0 !important; box-shadow: none !important; transition: border-color .3s, background-color .15s, color .15s; } body #stay-connected .otter-form__container .wp-block-button button:is(:hover, :focus-visible), body.page-id-1123 .neve-main :is(.otter-form__container button, button[type="submit"]):is(:hover, :focus-visible) { background: var(--nv-c-2) !important; color: var(--nv-primary-accent) !important; border-color: var(--nv-primary-accent) !important; } body .neve-main .cc-impact-teaser .wp-block-button .wp-block-button__link { background: var(--nv-c-2) !important; color: var(--nv-primary-accent) !important; border: 2px solid transparent !important; border-radius: 7px !important; outline: 0 !important; box-shadow: none !important; transform: none !important; transition: border-color .3s, background-color .15s, color .15s; } body .neve-main .cc-impact-teaser .wp-block-button .wp-block-button__link:is(:hover, :focus-visible) { background: var(--nv-c-2) !important; color: var(--nv-primary-accent) !important; border-color: var(--nv-primary-accent) !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; } body .neve-main .cc-impact-teaser .wp-block-button__link :is(strong, span) { color: inherit !important; }