/* 2026 Indivisible brand overlay for style.css. * * Scoped to `body.theme-2026`; must load after style.css. Pages without that * class (admin, auth, campaign management, submission) are unaffected. * style.css itself is never edited. */ /* Self-hosted; not available from Google Fonts. Kicker/eyebrow only. */ @font-face { font-family: "LinoGothicPen"; src: url("assets/fonts/LinoGothicPen.otf") format("opentype"); font-weight: 400; font-display: swap; } /* ---------- Tokens * style.css routes colour through these variables, so redefining them on * re-themes most components. Rules that hardcode hex are overridden * further down. */ body.theme-2026 { /* style.css uses Light-Blue for two jobs: page chrome and "tinted surface" * (visited cards, selected radios). Kept as the tinted surface; chrome is * recoloured explicitly below. */ --Indivisible-Light-Blue: #e8f6f9; /* pale cyan - tinted surfaces */ --Indivisible-Navy: #00213e; --Indivisible-Navy-Hover: #00315c; --Indivisible-Red: #bf0909; --Indivisible-Dark-Red: #ff3d3d; --Indivisible-Black: #00213e; --Indivisible-Blue: #57c6d7; --Indivisible-Gray-Blue: #fde0a5; --White: #ffffff; --muted: #00315c; --border: rgba(0, 33, 62, 0.22); /* 2026 additions */ --n2n-cream: #fffbef; --n2n-navy: #00213e; --n2n-navy-deep: #00213e; /* Blue Shade 2 */ --n2n-navy-mid: #00315c; /* Blue Shade 1 */ --n2n-cyan: #21dee8; --n2n-yellow: #ffba08; --n2n-red: #bf0909; /* Red Shade 1 */ --n2n-red-hover: #ff3d3d; /* Red Tint 1 */ --n2n-tint: #e8f6f9; /* pale cyan - subtly tinted surfaces */ /* Same value as the header, so hero and header read as one masthead. * --n2n-blue-mid is the deck's mid blue, for bands away from the header. */ --n2n-band-blue: #00213e; /* Blue Shade 2 - matches the header exactly */ --n2n-blue-mid: #003970; --n2n-yellow-deep: #ffba08; /* Official Indivisible palette. * * Red is Red Shade 1, not the logo red #FF0C0C: white on the logo red is * 3.95:1, which only clears AA at large bold sizes, whereas Red Shade 1 is * 6.45:1. The brand's Shades exist for exactly this reason. Re-check * contrast before changing. */ /* Brand deck's navy paper stock (#344770), not a named tint. Set this back * to #336795 for flat Blue Tint 1. */ --n2n-slate: #344770; --n2n-card: #fcf8ee; --n2n-accent-cyan: #21dee8; --n2n-font-kicker: "LinoGothicPen", "Barlow Condensed", cursive; /* The brand pairs rough-edged buttons with soft-cornered paper panels, so * cards get a radius even though buttons stay square. */ --n2n-radius: 12px; --n2n-font-heading: "Barlow Semi Condensed", Impact, sans-serif; --n2n-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --n2n-font-button: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--n2n-cream); font-family: var(--n2n-font-body); color: var(--n2n-navy); } body.theme-2026 .page { font-family: var(--n2n-font-body); color: var(--n2n-navy); background: var(--n2n-cream); } /* ---------- Typography */ body.theme-2026 h1, body.theme-2026 h2, body.theme-2026 h3, body.theme-2026 .dashboard-title, body.theme-2026 .dashboard-section-title, body.theme-2026 .dashboard-resource-title, body.theme-2026 .email-title, body.theme-2026 .neighbors-hero__title, body.theme-2026 .neighbor-detail__section-title, body.theme-2026 .neighbor-detail__household-name, body.theme-2026 .popup-title { font-family: var(--n2n-font-heading); font-weight: 700; letter-spacing: 0.005em; text-transform: uppercase; color: var(--n2n-navy); } body.theme-2026 .navigation-bold-text, body.theme-2026 .footer-text, body.theme-2026 .button-text { font-family: var(--n2n-font-button); font-weight: 600; letter-spacing: 0.04em; } /* Barlow plus the tracking above runs wider than the Montserrat it replaced; * without this the seven nav items wrap to a second line. */ body.theme-2026 .header .navigation-bold-text { letter-spacing: 0; font-size: 15px; white-space: nowrap; } body.theme-2026 .header .nav-item-container { gap: 7px; white-space: nowrap; } /* ---------- Header / footer * The nav macros hardcode the dark-ink logo, which is invisible on navy, so it * is swapped for the light variant via `content`. */ /* Chrome is flat; texture is reserved for content bands. */ body.theme-2026 .header { background-color: var(--n2n-navy-deep); background-image: none; padding: 14px 28px; gap: 20px; /* No divider: the hero band is the same colour, so a rule would cut a seam * through one continuous field. */ } body.theme-2026 .header .n2n-logo { content: url("assets/images/n2n-logo-2026-dark.svg"); width: auto; height: 46px; flex: 0 0 auto; } body.theme-2026 .header .navigation-bold-text, body.theme-2026 .header .nav-item-container { color: var(--n2n-cream); } body.theme-2026 .footer { background-color: var(--n2n-navy-deep); background-image: none; } /* Let the footer's texture show through its inner column wrapper. */ body.theme-2026 .footer__columns { background: transparent; } body.theme-2026 .footer .footer-text, body.theme-2026 .footer a { color: var(--n2n-cream); } /* The shipped wordmark is dark ink and disappears on navy. */ body.theme-2026 .footer .ind-logo { filter: brightness(0) invert(1); } body.theme-2026 .footer__vertical-break { background: rgba(255, 251, 239, 0.28); } /* ---------- Buttons: square and solid, per the 2026 button spec */ body.theme-2026 .submit-button, body.theme-2026 .button, body.theme-2026 .neighbor-detail__submit, body.theme-2026 .neighbor-card__talk-button { background-color: var(--n2n-red); color: #ffffff; font-family: var(--n2n-font-button); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 0; border-radius: 0; /* style.css ships 8px/20px, and the torn mask eats into the edges further. */ padding: 15px 34px; font-size: 16px; line-height: 1.1; } /* Torn-paper button edge. * * Masks are CORS-restricted like fonts. Over file:// the mask is fetched * cross-origin, is blocked, and the button masks to nothing - preview * same-origin over http. The @supports guard matters because an unsupported * mask must degrade to a rectangle, not to an invisible button. */ @supports ((mask-image: url("assets/textures/torn-button-mask.png")) or (-webkit-mask-image: url("assets/textures/torn-button-mask.png"))) { body.theme-2026 .submit-button, body.theme-2026 .button, body.theme-2026 .neighbor-detail__submit, body.theme-2026 .neighbor-card__talk-button { -webkit-mask-image: url("assets/textures/torn-button-mask.png"); mask-image: url("assets/textures/torn-button-mask.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } body.theme-2026 .submit-button:hover, body.theme-2026 .button:hover, body.theme-2026 .neighbor-detail__submit:hover, body.theme-2026 .neighbor-card__talk-button:hover { background-color: var(--n2n-red-hover); color: #ffffff; } /* Red is the primary action. The resource buttons are secondary, so they take * navy - one primary per page. */ body.theme-2026 .dashboard-resource-button { background-color: var(--n2n-navy); color: var(--n2n-cream); } body.theme-2026 .dashboard-resource-button:hover, body.theme-2026 .dashboard-resource-button:focus-visible { background-color: var(--n2n-navy-mid); color: var(--n2n-cream); } /* ---------- Inputs */ /* tel/textarea belong here too. The signup form is the only page with them, * so their absence showed up nowhere else. */ body.theme-2026 .email-input, body.theme-2026 .neighbor-detail__email-input, body.theme-2026 input[type="text"], body.theme-2026 input[type="email"], body.theme-2026 input[type="tel"], body.theme-2026 textarea { border: 2px solid var(--n2n-navy); border-radius: 0; font-family: var(--n2n-font-body); font-size: 16px; /* Explicit, not `normal`: a select and a text input resolve `normal` * differently, which left the two 1px apart in a shared row. */ line-height: 1.2; padding: 12px 14px; background: #ffffff; color: var(--n2n-navy); } body.theme-2026 .email-input:focus-visible, body.theme-2026 .neighbor-detail__email-input:focus-visible, body.theme-2026 input[type="text"]:focus-visible, body.theme-2026 input[type="email"]:focus-visible, body.theme-2026 input[type="tel"]:focus-visible, body.theme-2026 textarea:focus-visible, body.theme-2026 select:focus-visible { outline: 3px solid var(--n2n-cyan); outline-offset: 2px; } /* `appearance: none` is what lets the border apply on Safari. Padding matches * the inputs above so fields sharing a row align. */ body.theme-2026 select { border: 2px solid var(--n2n-navy); border-radius: 0; font-family: var(--n2n-font-body); font-size: 16px; line-height: 1.2; padding: 12px 38px 12px 14px; background-color: #ffffff; color: var(--n2n-navy); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300213e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } /* ---------- Cards and surfaces that hardcode the old palette */ /* The hero band supplies the colour; this used to paint its own navy panel. */ body.theme-2026 .dashboard-welcome-card { background: none; border: 0; padding: 0; } body.theme-2026 .email-container { background-color: #ffffff; border: 2px solid var(--n2n-navy); border-radius: var(--n2n-radius); } body.theme-2026 .challenge-wrapper { background-color: var(--n2n-cream); } body.theme-2026 a.address-style, body.theme-2026 .popup-title, body.theme-2026 .popup-close { color: var(--n2n-navy-mid); } body.theme-2026 .popup-actions, body.theme-2026 .mercury { background-color: var(--n2n-red); } /* Red here is text colour, not a background - it's the "In Progress" label. */ body.theme-2026 .progress-mark { color: var(--n2n-red); } body.theme-2026 .completed-mark { color: #0f7a4a; } body.theme-2026 .not-started-mark, body.theme-2026 .popup-content { color: var(--n2n-navy); } body.theme-2026 input[type="checkbox"]::before { border-color: var(--n2n-cyan); } body.theme-2026 input[type="checkbox"]:checked::before { background-color: var(--n2n-cyan); border-color: var(--n2n-cyan); } /* ---------- Neighbors page * Layout is in bands-2026.css. `.neighbors-container` must not paint cream over * the list band's paper texture. */ /* Border goes on the card. `.neighbor-card__header` is an inline span around * the name, so bordering that boxes the text instead. Cream not white: the * band behind it is near-white. */ body.theme-2026 .neighbor-card { background: var(--n2n-card); border: 2px solid var(--n2n-navy); border-radius: var(--n2n-radius); box-shadow: 0 6px 16px rgba(0, 33, 62, 0.10); gap: 6px; } /* The detail page's script/response sections ship borderless with no padding, * so bordering them would need a layout change. Colour and type only. */ body.theme-2026 .neighbor-detail__household-card { border-left: 8px solid var(--n2n-cyan); border-radius: var(--n2n-radius); } body.theme-2026 .neighbor-card { padding: 18px 20px 20px; } /* Visited households read as done at a glance. Green rather than the shared * tint token, so "already talked to" is distinct from "currently selected". */ body.theme-2026 .neighbor-card.visited { background-color: #f2faf6; border-left: 8px solid #0f7a4a; } /* The number is also the map pin - pins are numbered from these cards in * _neighbors_content.html.j2. */ .neighbor-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 6px; } body.theme-2026 .neighbor-card__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--n2n-navy); color: var(--n2n-cream); font-family: var(--n2n-font-button); font-weight: 600; font-size: 15px; line-height: 1; } body.theme-2026 .neighbor-card.visited .neighbor-card__num { background: #0f7a4a; } /* Visited but no conversation - Not Home, Bad Address. Yellow rather than * green: the door is not finished, and the card keeps its talk button. */ body.theme-2026 .neighbor-card.revisit { background-color: #fffaf0; border-left: 8px solid var(--n2n-yellow); } body.theme-2026 .neighbor-card.revisit .neighbor-card__num { background: #7a5200; } body.theme-2026 .neighbor-card__status--revisit { background: #fff1ce; color: #7a5200; } /* Bad address: closed, but not an achievement. Neutral rather than green. */ body.theme-2026 .neighbor-card.closed { background-color: #f7f7f5; } body.theme-2026 .neighbor-card.closed .neighbor-card__num { background: var(--n2n-navy-mid); } body.theme-2026 .neighbor-card__status--closed { background: rgba(0, 33, 62, 0.08); color: var(--n2n-navy-mid); } /* style.css sets `white-space: nowrap`; long household labels must wrap. */ body.theme-2026 .neighbor-card__header { font-family: var(--n2n-font-heading); font-size: 21px; line-height: 1.08; text-transform: uppercase; white-space: normal; min-width: 0; flex: 1 1 auto; } body.theme-2026 .neighbor-card__status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 4px; border-radius: 999px; background: #e2f3ea; color: #0f6b41; font-family: var(--n2n-font-button); font-weight: 600; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1; } /* style.css gives `.checkmark-icon` a 5px right margin; the chip's flex gap * already handles spacing. */ body.theme-2026 .neighbor-card__status .checkmark-icon { margin-right: 0; } body.theme-2026 .neighbor-address-block { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 14px; } /* Keeps its underline (external link) but not body size - the household name * above it is the card's headline. */ body.theme-2026 .neighbor-card .address-style { font-size: 15px; line-height: 1.35; align-self: flex-start; } body.theme-2026 .neighbor-distance { font-family: var(--n2n-font-button); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } /* Clicking a pin highlights its card. Red so it reads as "this one", and it is * the same colour the matching pin turns - the two ends of the same gesture. */ body.theme-2026 .neighbor-card--highlighted { outline: 3px solid var(--n2n-red); outline-offset: 3px; } /* Pin the call to action to the bottom so cards sharing a grid row line their * buttons up instead of floating at whatever height the address wraps to. */ body.theme-2026 .neighbor-card__talk-button, body.theme-2026 .neighbor-card__view-response { margin-top: auto; align-self: flex-start; } body.theme-2026 .neighbor-card__talk-button { padding: 11px 18px; font-size: 14px; } body.theme-2026 .neighbor-address-block { margin-bottom: 14px; } body.theme-2026 .neighbor-card__view-response { color: var(--n2n-navy-mid); font-family: var(--n2n-font-button); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; } body.theme-2026 .neighbor-distance, body.theme-2026 .neighbor-detail__address { color: var(--n2n-navy-mid); } body.theme-2026 .lists-nav__arrow--active { color: var(--n2n-red); } body.theme-2026 .lists-nav__arrow--inactive { color: rgba(0, 33, 62, 0.35); } /* Inline