/* ========================================================= LET'S MAKE CHANGES — public surfaces Uses the existing HertsPartners design tokens only; no new colours are invented here. Buttons use compound `button.hp-x` selectors on purpose. Hello Elementor's reset.css styles `[type=button]`/`[type=submit]` at specificity 0,1,0 and loads after plugin CSS, so a single-class rule loses and buttons render in the theme's crimson. This is the same fix already proven on the CV and Live Signals buttons. ========================================================= */ /* --------------------------------------------------------- Surfaces and text, in BOTH themes. Dark mode on this site is a class on and only a class (.hp-experience-dark), which redefines the platform theme's --hp-color-* tokens (site-experience.css). Those tokens DO flip. What did not flip were this file's own surfaces: every card, panel and input here set `background: #ffffff` as a literal. So the text above them turned light while the card underneath stayed white -- pale lavender copy on white cards, labels that disappeared, and typing that could not be seen. A surface and its text have to change together or neither should. That is the same fault already diagnosed and fixed once for the Partner Hub's own surfaces (public.css, "Dark mode (L01.1)"), and it is fixed the same way here: every surface and text colour resolves through ONE set of tokens that HAS a dark value, so a theme change is one block rather than a parallel list of per-component overrides. The names are new (--hpp-*), so nothing outside this file can resolve them and no other page on the site can be affected by anything below. The light values are exactly today's values; the dark values are the palette public.css already proves in production for the hub. --------------------------------------------------------- */ :root { --hpp-surface: #ffffff; /* a card */ --hpp-tint: #F5F0FF; /* the soft purple panel */ --hpp-field: #ffffff; /* an input's own background */ --hpp-ink: #111111; /* headings, field values */ --hpp-body: #4a4d55; /* running text */ --hpp-muted: #5c616b; /* hints, counts, captions */ --hpp-border: #ECECEC; --hpp-border-strong: #D5D0DD; --hpp-accent: #6D28D9; /* accent TEXT on the page surface */ /* * A solid accent BUTTON, and its hover. Deliberately a separate role from * --hpp-accent above, and deliberately NOT lightened in dark mode: it is a * background carrying --hpp-on-accent (white) text, so lightening it would * destroy that pairing -- which is exactly what happened to "Open Gmail", * white text on pale lavender. The same distinction public.css already * draws between --hp-purple-700 (text) and --hp-purple-600 (background). */ --hpp-accent-bg: #6D28D9; --hpp-accent-bg-hover: #2E1065; --hpp-accent-strong: #2E1065; /* a deeper accent TEXT, e.g. on hover */ --hpp-accent-soft: #C4B5FD; /* a soft accent border */ --hpp-brand: #7C3AED; /* the brand purple itself */ --hpp-brand-soft: #8B5CF6; --hpp-on-accent: #ffffff; /* text ON a solid accent; never flips */ --hpp-track: #EDE9F5; /* an empty progress track */ --hpp-danger-bg: #fdecea; --hpp-danger-ink: #8a1c13; --hpp-success-bg: #e8f6ee; --hpp-success-ink: #1b5e38; --hpp-shadow: 0 2px 14px rgba(17, 17, 17, .05); --hpp-shadow-lift: 0 6px 22px rgba(17, 17, 17, .08); --hpp-scheme: light; } html.hp-experience-dark { --hpp-surface: #21162c; --hpp-tint: #241a31; --hpp-field: #191120; --hpp-ink: #f5effb; --hpp-body: #e8dbf4; --hpp-muted: #c3b6d0; --hpp-border: #3a2b49; --hpp-border-strong: #57406f; --hpp-accent: #cc9cff; /* Stays a solid purple a white label can sit on. */ --hpp-accent-bg: #7C3AED; --hpp-accent-bg-hover: #8B5CF6; --hpp-accent-strong: #e2c9ff; --hpp-accent-soft: #6b4a90; --hpp-track: #332543; --hpp-danger-bg: #3a1714; --hpp-danger-ink: #ffb4ab; --hpp-success-bg: #12291d; --hpp-success-ink: #8ee0ae; --hpp-shadow: 0 4px 20px rgba(0, 0, 0, .45); --hpp-shadow-lift: 0 8px 28px rgba(0, 0, 0, .55); --hpp-scheme: dark; } .hp-petition, .hp-changes { max-width: 760px; margin: 0 auto; padding: 0 16px 64px; font-family: var(--hp-font-body, inherit); color: var(--hpp-body); } /* ---------- hero + progress ---------- */ .hp-petition__eyebrow, .hp-changes__title { font-family: var(--hp-font-heading, inherit); } .hp-petition__eyebrow a { color: inherit; } .hp-petition__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--hpp-accent); margin: 32px 0 8px; } .hp-petition__title { font-family: var(--hp-font-heading, inherit); font-size: clamp(30px, 7vw, 46px); line-height: 1.1; color: var(--hpp-ink); margin: 0 0 12px; } .hp-petition__standfirst { font-size: 18px; line-height: 1.55; margin: 0 0 28px; } /* * The progress panel carries a soft HertsPartners glow so the verified-supporter * figure reads as the important thing on the page. Deliberately restrained: a * tint and a wide, low-opacity brand shadow, not a neon edge. */ .hp-petition__progress { background: var(--hpp-tint); border: 1px solid var(--hpp-accent-soft); border-radius: var(--hp-radius-lg, 16px); padding: 20px; margin-bottom: 36px; box-shadow: 0 10px 34px color-mix(in srgb, var(--hpp-brand) 16%, transparent); } /* ---------- the progress component ---------- One honest number, and the two marks that give it meaning. The heart is the site's own approved mark, positioned at verified/target along the track, so the count has a place on the journey rather than being a bare percentage. At zero it sits at the start and the component still reads as designed rather than as an empty box. Nothing here invents, rounds up or animates a number that did not actually change. ------------------------------------------------ */ .hp-petition__count { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; } .hp-petition__count strong { font-family: var(--hp-font-heading, inherit); font-size: clamp(38px, 9vw, 52px); line-height: 1; letter-spacing: -.02em; color: var(--hpp-ink); font-variant-numeric: tabular-nums; } .hp-petition__count span { font-size: 13.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--hpp-muted); } /* `--hpp-pos` and `--hpp-mark` are set inline, per petition, from real counts. */ .hp-petition__track { --hpp-pos: 0%; --hpp-mark: 80%; margin: 18px 0 0; } .hp-petition__bar-row { position: relative; height: 32px; display: flex; align-items: center; } .hp-petition__bar, .hp-changes__bar { display: block; position: relative; flex: 1 1 auto; height: 12px; border-radius: var(--hp-radius-pill, 999px); background: var(--hpp-track); border: 1px solid var(--hpp-border); overflow: hidden; } .hp-petition__bar > span, .hp-changes__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hpp-brand), var(--hpp-accent-bg)); transition: width .6s cubic-bezier(.22, 1, .36, 1); } /* * The campaign target, as a line at the END of the track -- which is exactly * where it is: ProgressScale makes the target the track's end, so this is the * mark the key's purple swatch has always been describing. Sits just inside * the pill's right cap so it reads as the finish line rather than as an * overflowing edge. */ .hp-petition__target-mark { position: absolute; top: 4px; bottom: 4px; right: 0; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--hpp-brand), var(--hpp-accent-bg)); pointer-events: none; } /* The council threshold, as a line across the track. */ .hp-petition__threshold-mark { position: absolute; top: 4px; bottom: 4px; left: var(--hpp-mark); width: 2px; border-radius: 2px; background: var(--hpp-ink); opacity: .42; pointer-events: none; } /* The approved HertsPartners heart, riding the track. */ .hp-petition__heart { position: absolute; top: 50%; left: var(--hpp-pos); width: 30px; height: 30px; transform: translate(-50%, -50%); transition: left .6s cubic-bezier(.22, 1, .36, 1); pointer-events: none; filter: drop-shadow(0 2px 6px rgba(17, 17, 17, .3)); } .hp-petition__heart img { display: block; width: 100%; height: 100%; } /* Without the image, a solid brand dot rather than a gap. */ .hp-petition__heart--fallback { width: 18px; height: 18px; border-radius: 50%; background: var(--hpp-brand); border: 3px solid var(--hpp-surface); } /* ---------- the key ---------- Each entry shows the SAME shape the track uses, beside the number and what it means. The white line stops being a mystery mark and the heart stops being decoration. Never colour or position alone: every entry is real text. ------------------------------------ */ .hp-petition__key { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .hp-petition__key-item { flex: 1 1 165px; display: flex; align-items: center; gap: 10px; background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-md, 12px); padding: 10px 12px; } .hp-petition__key-item b { display: block; font-family: var(--hp-font-heading, inherit); font-size: 18px; line-height: 1.15; color: var(--hpp-ink); font-variant-numeric: tabular-nums; } .hp-petition__key-item small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--hpp-muted); } /* The marks, drawn exactly as they appear on the track above. */ .hp-petition__key-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 26px; } .hp-petition__key-mark--heart img { display: block; width: 20px; height: 20px; } .hp-petition__key-mark--threshold::before { content: ""; width: 2px; height: 20px; border-radius: 2px; background: var(--hpp-ink); opacity: .42; } .hp-petition__key-mark--target::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: linear-gradient(180deg, var(--hpp-brand), var(--hpp-accent-bg)); } @media (prefers-reduced-motion: reduce) { .hp-petition__bar > span, .hp-changes__bar > span, .hp-changes__heart, .hp-petition__heart { transition: none; } } /* * Every solid button on these pages that is an also carries the site's own * `hp-c-btn` class, and must keep it. * * components.css recolours every link inside `.site-main` -- at (0,8,2), which * nothing here can or should out-specify -- and deliberately excludes * `.hp-c-btn`, because that class is how this site says "this link is a * button, leave its colour alone". Without it, a white label on a solid purple * button was repainted purple ON purple: an invisible label, in light mode * only, on "Open Gmail", "Report a water location", "Request a petition" and * "Sign below". That is the other half of the invisible-button fault; the * token split above fixed the dark half. * * hp-c-btn itself sets no colour -- only layout, a touch target and * `text-decoration: none !important` -- so the rules below still own how these * buttons look. */ /* ---------- "Sign below" ---------- A navigation cue, not a marketing banner: it is deliberately smaller than the count above it and quieter than the real submit button at the bottom of the form. The arrow says where it goes; the glow says it is the live thing on the page without ever bouncing or flashing. ------------------------------------ */ .hp-petition__jump { margin: 18px 0 0; text-align: center; } a.hp-petition__jump-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: var(--hp-radius-pill, 999px); background: var(--hpp-accent-bg); color: var(--hpp-on-accent); font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; border: 1px solid var(--hpp-accent-bg); box-shadow: 0 6px 18px color-mix(in srgb, var(--hpp-brand) 32%, transparent); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } a.hp-petition__jump-btn svg { width: 17px; height: 17px; transition: transform .18s ease; } a.hp-petition__jump-btn:hover, a.hp-petition__jump-btn:focus-visible { background: var(--hpp-accent-bg-hover); color: var(--hpp-on-accent); transform: translateY(-1px); box-shadow: 0 10px 26px color-mix(in srgb, var(--hpp-brand) 42%, transparent); } a.hp-petition__jump-btn:hover svg { transform: translateY(2px); } a.hp-petition__jump-btn:focus-visible { outline: 3px solid var(--hpp-brand); outline-offset: 3px; } /* One slow breath, not a bounce. */ @keyframes hp-petition-jump-glow { 0%, 100% { box-shadow: 0 6px 18px color-mix(in srgb, var(--hpp-brand) 30%, transparent); } 50% { box-shadow: 0 6px 24px color-mix(in srgb, var(--hpp-brand) 55%, transparent); } } a.hp-petition__jump-btn { animation: hp-petition-jump-glow 3.4s ease-in-out infinite; } /* * The form has to clear the site's sticky header when the anchor lands, or the * heading it is named by ends up underneath it. `scroll-margin-top` is the * whole fix and costs nothing to anybody who arrives by any other route. */ .hp-petition-sign { scroll-margin-top: 96px; } /* * Smooth only where smooth is wanted. * * The document is what scrolls, not .hp-petition, so `scroll-behavior` has to * go on the root to have any effect at all. `:has()` keeps it to pages that * actually contain a petition, so scrolling feels exactly as it did everywhere * else on the site. Anywhere :has() is unsupported the anchor still works -- * it just jumps, which is the reduced-motion behaviour anyway. */ @media (prefers-reduced-motion: no-preference) { html:has(.hp-petition) { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { a.hp-petition__jump-btn, a.hp-petition__jump-btn svg { animation: none; transition: none; } a.hp-petition__jump-btn:hover { transform: none; } a.hp-petition__jump-btn:hover svg { transform: none; } } /* ---------- body ---------- */ .hp-petition__section { margin: 0 0 36px; } .hp-petition__section h2 { font-family: var(--hp-font-heading, inherit); font-size: 24px; color: var(--hpp-ink); margin: 0 0 12px; } .hp-petition__wording p { line-height: 1.65; margin: 0 0 14px; } .hp-petition__section--ask { background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-left: 4px solid var(--hpp-brand); border-radius: var(--hp-radius-md, 12px); padding: 20px; } .hp-petition__plan { margin: 0; padding-left: 20px; line-height: 1.8; } /* ---------- form ---------- */ .hp-petition-sign { background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-lg, 16px); padding: 24px 20px; box-shadow: var(--hpp-shadow); } .hp-petition-sign__intro { margin: 0 0 20px; color: var(--hpp-muted); } .hp-petition-sign__error { background: var(--hpp-danger-bg); color: var(--hpp-danger-ink); border-radius: var(--hp-radius-md, 12px); padding: 12px 14px; margin-bottom: 18px; font-size: 15px; } .hp-field { margin: 0 0 16px; } .hp-field label { display: block; font-weight: 600; color: var(--hpp-ink); margin-bottom: 6px; font-size: 15px; } .hp-field__optional { font-weight: 400; color: var(--hpp-muted); font-size: 13px; } /* * Every state a field can actually be in. * * A field is not "styled" once its background and colour are set. What a * person sees while filling a petition in is the placeholder, the caret they * type with, the text they select to correct, the ring when they tab to it, * and -- most often of all -- whatever their browser autofilled. Each of those * is painted by a DIFFERENT rule, and any one left to the browser's default * lands on the wrong side of a dark page. `color-scheme` is what makes the * browser's own furniture (the autofill dropdown, the spinner, a field's * scrollbar) match the surface it is drawn on. */ .hp-field input[type="text"], .hp-field input[type="email"], .hp-field textarea, .hp-field select, .hp-verify__change input[type="email"] { width: 100%; box-sizing: border-box; /* 16px minimum: anything smaller makes iOS Safari zoom on focus, which throws a one-handed user out of the form. */ font-size: 16px; font-family: inherit; padding: 13px 14px; border: 1px solid var(--hpp-border-strong); border-radius: var(--hp-radius-md, 12px); background: var(--hpp-field); color: var(--hpp-ink); caret-color: var(--hpp-brand); color-scheme: var(--hpp-scheme); transition: border-color .15s ease, box-shadow .15s ease; } .hp-field input::placeholder, .hp-field textarea::placeholder, .hp-verify__change input::placeholder { color: var(--hpp-muted); opacity: 1; /* Firefox dims placeholders; this one is already muted */ } .hp-field input::selection, .hp-field textarea::selection, .hp-verify__change input::selection { background: var(--hpp-brand); color: var(--hpp-on-accent); } .hp-field input:hover:not(:disabled), .hp-verify__change input:hover:not(:disabled) { border-color: var(--hpp-accent); } .hp-field input:focus-visible, .hp-field textarea:focus-visible, .hp-field select:focus-visible, .hp-verify__change input:focus-visible { outline: 2px solid var(--hpp-brand); outline-offset: 1px; border-color: var(--hpp-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hpp-brand) 22%, transparent); } .hp-field input:disabled, .hp-field textarea:disabled { background: var(--hpp-tint); color: var(--hpp-muted); -webkit-text-fill-color: var(--hpp-muted); /* iOS ignores `color` when disabled */ opacity: 1; cursor: not-allowed; } .hp-field.has-error input, .hp-field input[aria-invalid="true"] { border-color: var(--hpp-danger-ink); } /* * Autofill. WebKit and Blink paint their own background behind an autofilled * value and ignore `background-color` outright, so on a dark field the value * came back as near-black text on the browser's pale yellow. The only things * that reach it are an inset shadow the size of the field and * `-webkit-text-fill-color` for the text -- `color` is ignored here too. The * absurd transition delay is the long-standing way to stop the browser * animating its own colour back over the top when the field is focused. */ .hp-field input:-webkit-autofill, .hp-field input:-webkit-autofill:hover, .hp-field input:-webkit-autofill:focus, .hp-field input:-webkit-autofill:active, .hp-verify__change input:-webkit-autofill { -webkit-text-fill-color: var(--hpp-ink); -webkit-box-shadow: 0 0 0 1000px var(--hpp-field) inset; box-shadow: 0 0 0 1000px var(--hpp-field) inset; caret-color: var(--hpp-brand); transition: background-color 9999s ease-in-out 0s; } .hp-field__hint { font-size: 13px; color: var(--hpp-muted); margin: 6px 0 0; } .hp-field-row { display: grid; gap: 0 14px; } @media (min-width: 560px) { .hp-field-row { grid-template-columns: 1fr 1fr; } } /* honeypot: invisible to sight and to assistive technology */ .hp-petition-sign__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------- signature pad ---------- */ /* ---------- the signature pad ---------- A signature pad is a sheet of paper, and it stays one in both themes. The pad used to take the field background, so in dark mode it was a dark surface -- and the ink is #111111, because that is what has to be legible later when the signature is rendered onto a white submission document for the Council. Near-black ink on a near-black pad: people could not see what they were drawing. Lightening the INK to suit dark mode would have fixed the screen and broken the submission, which is the one place the signature really has to be readable. So the surface is fixed light instead, in both themes, and the stored PNG is completely unchanged: same canvas, same validated re-encode, same private file. ------------------------------------ */ .hp-signature__pad { position: relative; /* Not a theme token: paper, in both themes, on purpose. */ background: #fcfbff; border: 2px dashed #b9b0c9; border-radius: var(--hp-radius-md, 12px); height: 180px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(17, 17, 17, .07); } .hp-signature.is-signed .hp-signature__pad { border-style: solid; border-color: var(--hpp-brand); } .hp-signature.has-error .hp-signature__pad { border-color: #b3261e; } /* Focus has to be visible against paper, not against the card behind it. */ .hp-signature__pad:focus-within { border-color: var(--hpp-brand); border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hpp-brand) 26%, transparent); } .hp-signature__pad canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; } .hp-signature__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; /* Muted against PAPER, which is a different colour from the muted text on the card around it -- the pad does not follow the theme. */ color: #6b6577; pointer-events: none; font-size: 15px; } .hp-signature__actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } button.hp-signature__clear, button.hp-signature__typed-toggle, button.hp-verify__secondary, button.hp-verify__check { font: inherit; font-size: 14px; background: var(--hpp-surface); color: var(--hpp-accent); border: 1px solid var(--hpp-accent-soft); border-radius: var(--hp-radius-pill, 999px); padding: 10px 18px; cursor: pointer; min-height: 44px; /* comfortable touch target */ } button.hp-signature__clear:hover, button.hp-signature__typed-toggle:hover, button.hp-verify__secondary:hover, button.hp-verify__check:hover { background: var(--hpp-tint); color: var(--hpp-accent-strong); } .hp-signature__typed { margin-top: 12px; } /* ---------- checkboxes ---------- */ .hp-check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; } .hp-check input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--hpp-brand); } .hp-check label { font-size: 15px; line-height: 1.5; color: var(--hpp-body); } .hp-petition-sign__privacy { margin: 0 0 22px; font-size: 14px; } .hp-petition-sign__privacy summary { cursor: pointer; color: var(--hpp-accent); font-weight: 600; } .hp-petition-sign__privacy p { margin: 10px 0 0; line-height: 1.6; } button.hp-petition-sign__submit { font: inherit; font-weight: 700; font-size: 17px; width: 100%; min-height: 54px; background: var(--hpp-accent-bg); color: var(--hpp-on-accent); border: 0; border-radius: var(--hp-radius-md, 12px); cursor: pointer; } button.hp-petition-sign__submit:hover { background: var(--hpp-accent-bg-hover); color: var(--hpp-on-accent); } .hp-petition-sign__footnote { text-align: center; font-size: 13px; color: var(--hpp-muted); margin: 12px 0 0; } /* ---------- one last step ---------- */ .hp-verify__card, .hp-verified__card { background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-lg, 16px); padding: 28px 20px; text-align: center; box-shadow: var(--hpp-shadow); } .hp-verify__step { font-family: var(--hp-font-heading, inherit); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 700; color: var(--hpp-accent); margin: 0 0 10px; } .hp-verify__title, .hp-verified__title { font-family: var(--hp-font-heading, inherit); font-size: clamp(23px, 5.5vw, 30px); line-height: 1.2; color: var(--hpp-ink); margin: 0 0 14px; } .hp-verify__sent { font-size: 16px; margin: 0 0 6px; } .hp-verify__email { display: block; margin-top: 6px; font-size: 18px; color: var(--hpp-ink); word-break: break-all; } .hp-verify__explain { color: var(--hpp-muted); margin: 10px 0 22px; } .hp-verify__generic-lead { font-weight: 600; color: var(--hpp-ink); margin: 0 0 16px; } .hp-verify__flash { border-radius: var(--hp-radius-md, 12px); padding: 11px 14px; font-size: 15px; margin: 0 0 18px; } .hp-verify__flash--ok { background: var(--hpp-success-bg); color: var(--hpp-success-ink); } .hp-verify__flash--warn { background: var(--hpp-danger-bg); color: var(--hpp-danger-ink); } .hp-verify__inboxes { display: grid; gap: 10px; margin: 0 0 16px; } a.hp-verify__inbox { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 18px; font-size: 17px; font-weight: 700; text-decoration: none; border-radius: var(--hp-radius-md, 12px); border: 1px solid var(--hpp-accent-soft); background: var(--hpp-surface); color: var(--hpp-accent); } a.hp-verify__inbox:hover { background: var(--hpp-tint); } a.hp-verify__inbox--likely { background: var(--hpp-accent-bg); border-color: var(--hpp-accent-bg); color: var(--hpp-on-accent); } a.hp-verify__inbox--likely:hover { background: var(--hpp-accent-bg-hover); color: var(--hpp-on-accent); } /* When nothing was delivered there is no inbox to open, so resending IS the action on this screen and is styled as one. */ button.hp-verify__secondary--primary { background: var(--hpp-accent-bg); border-color: var(--hpp-accent-bg); color: var(--hpp-on-accent); font-weight: 700; } button.hp-verify__secondary--primary:hover { background: var(--hpp-accent-bg-hover); color: var(--hpp-on-accent); } .hp-verify__likely { font-size: 12px; font-style: normal; opacity: .85; font-weight: 600; } .hp-verify__hint { font-size: 14px; color: var(--hpp-muted); line-height: 1.6; margin: 0 0 22px; } .hp-verify__recovery { border-top: 1px solid var(--hpp-border); padding-top: 20px; display: grid; gap: 12px; justify-items: center; } .hp-verify__resend-form { margin: 0; } .hp-verify__change { width: 100%; text-align: left; font-size: 14px; } .hp-verify__change summary { cursor: pointer; color: var(--hpp-accent); font-weight: 600; text-align: center; } .hp-verify__change form { margin-top: 12px; display: grid; gap: 10px; } button.hp-verify__check.is-waiting { border-color: var(--hpp-border-strong); color: var(--hpp-muted); } /* ---------- verified ---------- */ .hp-verified__tick { font-size: 46px; margin: 0 0 6px; } .hp-verified__number { font-family: var(--hp-font-heading, inherit); font-size: 22px; color: var(--hpp-accent); margin: 0 0 14px; } .hp-verified__thanks { line-height: 1.6; margin: 0; } .hp-verified__next { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hpp-border); } .hp-verified__next h3 { font-family: var(--hp-font-heading, inherit); font-size: 20px; color: var(--hpp-ink); margin: 0 0 8px; } a.hp-verified__cta, a.hp-changes__cta { display: inline-block; margin-top: 12px; padding: 14px 24px; min-height: 48px; background: var(--hpp-accent-bg); color: var(--hpp-on-accent); text-decoration: none; font-weight: 700; border-radius: var(--hp-radius-md, 12px); } a.hp-verified__cta:hover, a.hp-changes__cta:hover { background: var(--hpp-accent-bg-hover); color: var(--hpp-on-accent); } .hp-verified__optional { font-size: 13px; color: var(--hpp-muted); margin: 10px 0 0; } /* ---------- directory ---------- The active campaign is the point of this page, so it gets a card that says what the petition is, where it applies and how far it has got -- real figures only. No countdown, no "only N to go", no pressure to support something the reader has not read yet. ------------------------------------ */ .hp-changes__standfirst { font-size: 18px; line-height: 1.55; color: var(--hpp-body); margin: 4px 0 32px; max-width: 60ch; } .hp-changes__section { margin: 0 0 40px; } .hp-changes__section h2 { font-family: var(--hp-font-heading, inherit); font-size: 22px; color: var(--hpp-ink); margin: 0 0 14px; } .hp-changes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .hp-changes__card a { display: block; text-decoration: none; color: inherit; background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-lg, 16px); padding: 20px; box-shadow: var(--hpp-shadow); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .hp-changes__card a:hover, .hp-changes__card a:focus-visible { box-shadow: var(--hpp-shadow-lift); border-color: var(--hpp-accent-soft); transform: translateY(-1px); } .hp-changes__card a:focus-visible { outline: 2px solid var(--hpp-brand); outline-offset: 2px; } .hp-changes__card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .hp-changes__card h3 { font-family: var(--hp-font-heading, inherit); font-size: clamp(21px, 3.6vw, 26px); line-height: 1.2; color: var(--hpp-ink); margin: 0 0 8px; } .hp-changes__card p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--hpp-body); } .hp-changes__status { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 11px; border-radius: var(--hp-radius-pill, 999px); background: var(--hpp-border); color: var(--hpp-muted); } .hp-changes__status--live { background: var(--hpp-tint); color: var(--hpp-accent); border: 1px solid var(--hpp-accent-soft); } .hp-changes__where { font-size: 13px; font-weight: 600; color: var(--hpp-muted); } .hp-changes__progress { display: block; --hpp-mark: 80%; padding: 14px; border-radius: var(--hp-radius-md, 12px); background: var(--hpp-tint); border: 1px solid var(--hpp-border); margin: 0 0 16px; } .hp-changes__figure { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .hp-changes__figure b { font-family: var(--hp-font-heading, inherit); font-size: 28px; line-height: 1; color: var(--hpp-ink); font-variant-numeric: tabular-nums; } .hp-changes__figure small { font-size: 13px; font-weight: 650; color: var(--hpp-muted); } .hp-changes__bar { flex: none; } /* * The compact track's own row, matching .hp-petition__bar-row on the detail * page. The threshold line and the heart sit HERE rather than inside the bar: * the bar clips its overflow so the fill can keep the pill radius, and * anything inside it gets sliced at both ends of the track. */ .hp-changes__bar-row { position: relative; display: block; margin-top: 8px; } .hp-changes__mark { position: absolute; top: 2px; bottom: 2px; left: var(--hpp-mark); width: 2px; background: var(--hpp-ink); opacity: .42; border-radius: 2px; pointer-events: none; } /* The same approved heart as the detail page, smaller. Same position rule. */ .hp-changes__heart { position: absolute; top: 50%; left: var(--hpp-pos, 0%); width: 20px; height: 20px; transform: translate(-50%, -50%); transition: left .6s cubic-bezier(.22, 1, .36, 1); pointer-events: none; filter: drop-shadow(0 1px 4px rgba(17, 17, 17, .32)); } .hp-changes__heart img { display: block; width: 100%; height: 100%; } .hp-changes__heart--fallback { width: 13px; height: 13px; border-radius: 50%; background: var(--hpp-brand); border: 2px solid var(--hpp-surface); } .hp-changes__scale { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--hpp-muted); } .hp-changes__scale b { color: var(--hpp-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .hp-changes__key-item { display: inline-flex; align-items: center; gap: 6px; } /* Deliberately the same three shapes as the full page's key, just smaller: one glance at either should teach you both. */ .hp-changes__key-mark { flex: none; display: inline-block; border-radius: 2px; } /* * The same SIZES as the detail page's key, not just the same shapes. They were * 16px/13px here against 20px there, which made the card's key look like a * shrunken imitation of the page it links to rather than the same system. */ .hp-changes__key-mark--heart { width: 20px; height: 20px; border-radius: 0; } .hp-changes__key-mark--heart img { display: block; width: 20px; height: 20px; } .hp-changes__key-mark--threshold { width: 2px; height: 20px; background: var(--hpp-ink); opacity: .42; } .hp-changes__key-mark--target { width: 4px; height: 20px; background: linear-gradient(180deg, var(--hpp-brand), var(--hpp-accent-bg)); } /* The compact track's own end mark, matching .hp-petition__target-mark. */ .hp-changes__target-mark { position: absolute; top: 2px; bottom: 2px; right: 0; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--hpp-brand), var(--hpp-accent-bg)); pointer-events: none; } .hp-changes__action { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--hpp-accent); } /* * Hello Elementor's theme.css underlines every link inside `.page-content`, * which is every link on these pages. On a card whose WHOLE body is the link * that underlined the title, the description and both figures -- the card read * as a wall of underlined text. These rules carry the component root so they * are more specific than the theme's, and the underline is put back exactly * where it means something: the action, on hover. */ .hp-changes .hp-changes__card a, .hp-petition .hp-petition__eyebrow a { text-decoration: none; } .hp-changes .hp-changes__card a:hover .hp-changes__action, .hp-changes .hp-changes__card a:focus-visible .hp-changes__action, .hp-petition .hp-petition__eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; } .hp-changes__list--past .hp-changes__card a { padding: 16px 20px; } .hp-changes__list--past .hp-changes__card h3 { font-size: 19px; margin: 0; } .hp-changes__empty { margin: 0; padding: 20px; border: 1px dashed var(--hpp-border-strong); border-radius: var(--hp-radius-lg, 16px); background: var(--hpp-tint); color: var(--hpp-muted); font-size: 15px; line-height: 1.6; } .hp-changes__request { background: var(--hpp-tint); border-radius: var(--hp-radius-lg, 16px); padding: 24px 20px; } /* ========================================================= COMMUNITY WATER MAP An original HertsPartners water-droplet marker, drawn inline as SVG. No third-party icon set is loaded or reproduced. Colour is applied entirely here, so a state change is a class swap rather than a second image. The progression runs purple -> slate -> water blue -> teal -> deep blue -> green. There is deliberately NO red and NO amber anywhere in it: a resident pointing at a pond is asking for it to be looked at, and must never make a location look condemned. ========================================================= */ .hp-water { --hp-water-blue: #3B82F6; /* restrained, never a warning colour */ --hp-water-deep: #1D4ED8; --hp-water-teal: var(--hp-accent-teal, #0D9488); --hp-water-slate: #64748B; --hp-water-green: var(--hpp-success-ink); } .hp-water__canvas { height: clamp(340px, 58vh, 520px); border-radius: var(--hp-radius-lg, 16px); border: 1px solid var(--hpp-border); overflow: hidden; background: #eef2f7; } /* ---------- the marker ---------- */ .hp-water-marker { background: none !important; border: 0 !important; } .hp-water-marker__inner { position: relative; display: block; width: 34px; height: 44px; } .hp-water-marker svg { width: 34px; height: 44px; display: block; overflow: visible; } /* * The white halo is what makes this legible on OpenStreetMap, whose tiles are * pale, busy and full of thin lines. paint-order puts the stroke behind the * fill so the halo never eats into the droplet's own shape. */ /* * From here through the marker rules, the white is deliberate and must NOT be * themed. These shapes are drawn ON the map tiles, which are light in both * themes -- a marker that followed the page theme would vanish into the map * the moment somebody switched to dark. */ .hp-water-marker__drop { fill: var(--hpp-brand); stroke: #ffffff; stroke-width: 2.5; paint-order: stroke fill; filter: drop-shadow(0 2px 3px rgba(17, 17, 17, .28)); transition: fill .2s ease, stroke .2s ease; } .hp-water-marker__wave { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 2.1; stroke-linecap: round; } .hp-water-marker__wave--low { stroke: rgba(255, 255, 255, .6); stroke-width: 1.8; } /* ---------- unconfirmed: a proposal, drawn hollow ---------- */ .hp-water-marker--unconfirmed .hp-water-marker__drop { fill: #ffffff; stroke: var(--hpp-brand); stroke-width: 2.6; stroke-dasharray: 4 3; paint-order: fill stroke; } .hp-water-marker--unconfirmed .hp-water-marker__wave { stroke: var(--hpp-brand-soft); } .hp-water-marker--unconfirmed .hp-water-marker__wave--low { stroke: var(--hpp-accent-soft); } /* ---------- confirmed workflow states ---------- */ .hp-water-marker--submitted .hp-water-marker__drop { fill: var(--hpp-brand); } .hp-water-marker--review .hp-water-marker__drop { fill: #64748B; } .hp-water-marker--requested .hp-water-marker__drop { fill: #3B82F6; } .hp-water-marker--recommended .hp-water-marker__drop { fill: #0D9488; } .hp-water-marker--planned .hp-water-marker__drop { fill: #1D4ED8; } .hp-water-marker--completed .hp-water-marker__drop { fill: #1B7F4B; } /* ---------- report-count badge ---------- */ .hp-water-marker__count { position: absolute; top: -3px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; border-radius: var(--hp-radius-pill, 999px); background: #ffffff; /* on the map: fixed, like the marker above */ color: var(--hpp-ink); border: 1.5px solid var(--hpp-brand); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; font-style: normal; box-shadow: 0 1px 3px rgba(17, 17, 17, .2); } /* ---------- motion ---------- */ @keyframes hp-water-drop { 0% { transform: translateY(-16px) scale(.86); opacity: 0; } 60% { transform: translateY(2px) scale(1.04); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes hp-water-confirm { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } } .hp-water-marker.is-dropping .hp-water-marker__inner { animation: hp-water-drop .38s cubic-bezier(.2, .8, .3, 1) both; } .hp-water-marker.is-confirming .hp-water-marker__inner { animation: hp-water-confirm .34s ease both; } /* * Reduced motion removes the animation but NOT the state change: somebody who * has asked for less movement still has to be able to see that their marker * moved from proposed to confirmed. */ @media (prefers-reduced-motion: reduce) { .hp-water-marker.is-dropping .hp-water-marker__inner, .hp-water-marker.is-confirming .hp-water-marker__inner { animation: none; } .hp-water-marker__drop { transition: none; } } .hp-water-marker:focus-visible { outline: none; } .hp-water-marker:focus-visible .hp-water-marker__drop { /* On the map, not on the page: the tiles are light in both themes, so this ring is a fixed dark purple rather than the theme's accent. */ stroke: #2E1065; stroke-width: 3.4; } /* ---------- surrounding controls ---------- */ .hp-water__tools { display: grid; gap: 10px; margin: 0 0 12px; } /* * .hp-field carries `margin: 0 0 16px` so it stacks correctly in ordinary * forms. Inside this grid that margin is part of the item's box, so * `align-items: end` lined the "Use my location" button up with the bottom of * the MARGIN rather than with the "Go" button beside it -- leaving it sitting * exactly 16px low. The grid's own gap already does the spacing here. */ .hp-water__tools .hp-field { margin-bottom: 0; } /* Two children, two columns: the third `auto` was a phantom track. */ @media (min-width: 620px) { .hp-water__tools { grid-template-columns: 1fr auto; align-items: end; } } .hp-water__search-row { display: flex; gap: 8px; } .hp-water__search-row input { flex: 1 1 auto; } button.hp-water__btn { font: inherit; font-size: 15px; min-height: 46px; padding: 11px 16px; border-radius: var(--hp-radius-md, 12px); border: 1px solid var(--hpp-accent-soft); background: var(--hpp-surface); color: var(--hpp-accent); cursor: pointer; white-space: nowrap; } button.hp-water__btn:hover { background: var(--hpp-tint); color: var(--hpp-accent-strong); } .hp-water__hint { font-size: 14px; color: var(--hpp-muted); margin: 10px 0; } /* the status line is the assistive-technology narration of the map */ .hp-water__status { font-size: 14px; color: var(--hpp-ink); background: var(--hpp-tint); border-radius: var(--hp-radius-md, 12px); padding: 10px 14px; margin: 10px 0 0; min-height: 20px; } /* ---------- keyboard nudge pad: the non-drag adjustment path ---------- */ .hp-water__nudge { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; justify-content: center; /* * The bottom margin is load-bearing. The confirm sheet below pulls * itself up by 14px to sit snug against the map, and with no clearance * here it landed ON the nudge pad: the left/down/right row was half * hidden behind the sheet's own top edge, so the one control somebody * who cannot drag a marker depends on was the one control they could * not see. Found by looking at the rendered page, not the CSS. */ margin: 12px auto 22px; } button.hp-water__nudge-btn { font: inherit; font-size: 16px; background: var(--hpp-surface); border: 1px solid var(--hpp-border-strong); border-radius: var(--hp-radius-sm, 8px); color: var(--hpp-accent); cursor: pointer; } button.hp-water__nudge-btn:hover { background: var(--hpp-tint); } .hp-water__nudge-btn--up { grid-column: 2; grid-row: 1; } .hp-water__nudge-btn--left { grid-column: 1; grid-row: 2; } .hp-water__nudge-btn--down { grid-column: 2; grid-row: 2; } .hp-water__nudge-btn--right { grid-column: 3; grid-row: 2; } /* ---------- mobile bottom sheet ---------- */ .hp-water__sheet { position: sticky; bottom: 0; background: var(--hpp-surface); border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-lg, 16px) var(--hp-radius-lg, 16px) 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px rgba(17, 17, 17, .1); margin-top: -14px; transform: translateY(8px); opacity: .6; transition: transform .25s ease, opacity .25s ease; } .hp-water__sheet.is-open { transform: translateY(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .hp-water__sheet { transition: none; } } button.hp-water__confirm { font: inherit; font-weight: 700; font-size: 17px; width: 100%; min-height: 54px; border: 0; border-radius: var(--hp-radius-md, 12px); background: var(--hpp-accent-bg); color: var(--hpp-on-accent); cursor: pointer; } button.hp-water__confirm:hover { background: var(--hpp-accent-bg-hover); color: var(--hpp-on-accent); } button.hp-water__confirm:disabled { background: var(--hpp-border); color: var(--hpp-muted); cursor: not-allowed; } .hp-water__sheet-lead { margin: 0 0 12px; font-size: 15px; color: var(--hpp-ink); } /* ---------- the report questions ---------- */ /* * These had no styling at all. The markup was right -- .hp-water__fieldset, * .hp-water__radio -- but nothing ever matched it, so the last screen of the * flow rendered as raw browser defaults: hairline fieldset boxes with the * legend cutting through the border, and native grey radios, sitting directly * under a page that is styled everywhere else. On the dark theme it read as * an unfinished form. * * Deliberately the same panel language the rest of these surfaces already * use -- tint background, the standard border and radius, the brand accent * on the control itself -- rather than a new look invented for this one * screen. */ .hp-water__details { margin-top: 20px; } .hp-water__fieldset { margin: 0 0 16px; padding: 14px 16px 12px; border: 1px solid var(--hpp-border); border-radius: var(--hp-radius-md, 12px); background: var(--hpp-tint); min-width: 0; /* a fieldset will not shrink below its content without this */ } .hp-water__fieldset > legend { /* * Drawn as an ordinary label above the group rather than inset into the * border: float+padding keeps it a real for assistive * technology while removing the notch the default rendering cuts in the * top border. */ float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--hpp-ink); } .hp-water__fieldset::after { content: ''; display: table; clear: both; } .hp-water__radio { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 8px 14px 8px 10px; border: 1px solid var(--hpp-border-strong); border-radius: 999px; background: var(--hpp-field); color: var(--hpp-body); font-size: 15px; line-height: 1.3; cursor: pointer; /* A real 44px target on a phone, which a bare radio never is. */ min-height: 44px; } .hp-water__radio:hover { border-color: var(--hpp-brand); } .hp-water__radio input[type="radio"], .hp-water__radio input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--hpp-brand); } /* The selected answer has to be obvious at a glance, not only by the dot. */ .hp-water__radio:has(input:checked) { border-color: var(--hpp-brand); box-shadow: inset 0 0 0 1px var(--hpp-brand); color: var(--hpp-ink); font-weight: 600; } .hp-water__radio:has(input:focus-visible) { outline: 2px solid var(--hpp-brand); outline-offset: 2px; } /* ---------- legend ---------- */ .hp-water__legend { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; } .hp-water__legend li { display: flex; align-items: flex-start; gap: 10px; } .hp-water__swatch { flex: 0 0 auto; width: 14px; height: 18px; border-radius: 0 0 7px 7px / 0 0 9px 9px; position: relative; margin-top: 2px; } .hp-water__swatch::before { content: ''; position: absolute; inset: 0; background: currentColor; clip-path: polygon(50% 0%, 100% 62%, 85% 92%, 50% 100%, 15% 92%, 0% 62%); } .hp-water__swatch--submitted { color: var(--hpp-brand); } .hp-water__swatch--review { color: #64748B; } .hp-water__swatch--requested { color: #3B82F6; } .hp-water__swatch--recommended { color: #0D9488; } .hp-water__swatch--planned { color: #1D4ED8; } .hp-water__swatch--completed { color: #1B7F4B; } .hp-water__legend-note { font-size: 13px; color: var(--hpp-muted); margin: 12px 0 0; line-height: 1.55; }