/* Save Tompion Community Hall campaign. Shared by two pages that use it for different halves of the file: - index.html loads it for the first-visit modal (#campaign-modal) and the persistent notice in the header (.campaign-notice). - save-our-community-hall/index.html loads it for the page shell and the objection form. Everything else -- type, buttons, form controls, checkboxes and radios -- comes from main.css, which the campaign page loads for exactly that reason. Only what main.css has no rule for, or gets wrong at this length of text, is written here. The accent is #288548, the estate green already used by .glow and by the cookie banner's top border, so the campaign reads as part of the site rather than as something bolted to it. */ /* The reset in main.css gives section, header, footer and friends an author `display: block`, and an author rule beats the browser's own [hidden] rule however specific it is. Several blocks on the campaign page are shown and hidden by toggling that attribute, so it has to be restated here as one an author rule cannot lose to. */ [hidden] { display: none !important; } /* ------------------------------------------------------------------------- Campaign page shell ------------------------------------------------------------------------- */ /* The campaign page deliberately does not load slideshow.js or main.js. It has no panels to drive and no backdrop to wait for, so it also avoids main.css's loading overlay -- the same trap 404.html documents -- simply by never putting is-preload on and never including #loadingPage. The side benefit matters here more than on the home page: a resident who follows a link to this page from a poster or a WhatsApp message is not charged 180KB of slideshow backdrops before they can read it. */ .campaign-page { padding: 0; margin: 0; } .campaign-shell { width: 100%; max-width: 100%; padding: 2rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; } @media screen and (max-width: 736px) { .campaign-shell { padding: 1.5rem 1rem; } } @media screen and (max-width: 480px) { .campaign-shell { padding: 1rem; } } /* Same measure and panel treatment as an article on the home page, so the two feel like one site. Solid rather than the home page's 85% black, because there is no backdrop behind it to show through. */ .campaign-panel { width: 40rem; max-width: 100%; background-color: #22272b; border-radius: 4px; padding: 2.5rem 2.5rem 1.5rem 2.5rem; word-wrap: break-word; } @media screen and (max-width: 736px) { .campaign-panel { padding: 2rem 1.5rem 0.5rem 1.5rem; } } @media screen and (max-width: 480px) { .campaign-panel { padding: 1.5rem 1.25rem 0.5rem 1.25rem; } } .campaign-masthead { text-align: center; margin-bottom: 2rem; } .campaign-masthead a { border-bottom: 0; display: inline-block; } .campaign-masthead img { width: 5.5rem; height: 5.5rem; border: solid 1px #ffffff; border-radius: 100%; display: block; margin: 0 auto 1rem auto; } .campaign-masthead .campaign-masthead-name { text-transform: uppercase; letter-spacing: 0.2rem; font-size: 0.7rem; margin: 0; opacity: 0.85; } /* h1 in main.css carries 0.5rem of letter-spacing, which is right for the two words on the home page and pushes a four-word campaign title into four cramped lines on a phone. Sized so that "Save Tompion Community Hall" holds one line wherever there is room for it. Measured at 1280px, where the panel gives the heading 560px: 1.9rem/0.3rem needs more than that and wraps, 1.9rem/0.25rem fits with 2.3% to spare, which is close enough that a different font metric or a browser zoom would push it over. 1.8rem/0.2rem leaves 10.3%, and holds one line at every width from 768px up. Below that it wraps, which a 27-character uppercase title on a 375px phone always will. */ .campaign-panel h1 { letter-spacing: 0.2rem; font-size: 1.8rem; margin-bottom: 1.5rem; /* Centred under the masthead, which is centred too. The body copy below stays ranged left, where it is easier to read. The padding is the same trick consent.css uses on its buttons, for the same reason: letter-spacing is applied after the last letter as well as between them, so the line box is 0.2rem wider than the ink and centring it leaves the title half of that -- 1.6px -- to the left of the logo above it. A left pad equal to the letter-spacing moves the centring box back by exactly half of itself. */ text-align: center; padding-left: 0.2rem; } @media screen and (max-width: 480px) { .campaign-panel h1 { letter-spacing: 0.15rem; font-size: 1.5rem; } } .campaign-panel h2 { font-size: 1.1rem; letter-spacing: 0.25rem; border-bottom: solid 1px #ffffff; padding-bottom: 0.5rem; margin: 3rem 0 1.5rem 0; } .campaign-lead { font-size: 1.05rem; } /* The photograph of the Community Hall. Not lazy-loaded: it sits in the first screen and is almost certainly the largest thing painted there, so deferring it would only make the page look slower. The reset in main.css already zeroes the figure's own margins. */ .campaign-figure { margin: 0 0 2rem 0; } .campaign-figure img { display: block; width: 100%; height: auto; border-radius: 4px; } .campaign-figure figcaption { font-size: 0.8rem; line-height: 1.5; opacity: 0.8; margin-top: 0.6rem; } /* The photograph costs first-screen space, which is the one thing this page cannot spare. Above 736px there is room to set it beside the opening lines instead of under them, and then it costs nothing at all: the row is as tall as the text was on its own. Below that it stacks, at its own proportions. */ /* Stacked, the picture grows with the column: 173px tall on a 390px phone but 289px at 736px, which is the widest screen that still stacks and so the one where it costs the most. The cap bites only there. Every real phone width is under it and shows the photograph whole. */ @media screen and (max-width: 736px) { .campaign-figure img { max-height: 200px; object-fit: cover; object-position: center; } } @media screen and (min-width: 737px) { .campaign-intro { display: flex; align-items: flex-start; gap: 2rem; margin-bottom: 2.5rem; } .campaign-intro-text { flex: 1 1 52%; min-width: 0; } .campaign-intro .campaign-figure { flex: 1 1 48%; min-width: 0; margin: 0; } .campaign-intro .campaign-lead { margin-bottom: 1.5rem; } .campaign-intro .campaign-reference { margin-bottom: 0; } } /* The application reference, set apart so it can be read off the screen and typed into the council's search box. */ .campaign-reference { display: block; border-left: solid 3px #288548; border-radius: 0 4px 4px 0; padding: 0.5rem 0 0.5rem 0.85rem; margin: 0 0 2.5rem 0; font-size: 0.85rem; line-height: 1.5; letter-spacing: 0.05rem; } .campaign-reference strong { letter-spacing: 0.1rem; } .campaign-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: solid 1px rgba(255, 255, 255, 0.25); font-size: 0.8rem; text-align: center; opacity: 0.85; } .campaign-footer p { margin-bottom: 0.75rem; } /* ------------------------------------------------------------------------- Buttons with a full sentence on them ------------------------------------------------------------------------- */ /* main.css sets every button to a fixed 2.75rem with white-space: nowrap, which is right for "Register" and sends "Open email and send objection" off the side of a 320px phone. .button-wrap lets those labels take the room they need without changing anything else about them. */ .button-wrap { white-space: normal !important; height: auto !important; line-height: 1.4 !important; padding: 0.85rem 1.25rem 0.85rem 1.35rem !important; min-height: 2.75rem; } /* Absolute, not rem, for the same reason the header nav gives its rows a flat 44px: the root drops to 11pt at 736px and 10pt at 360px, which takes 2.75rem down to 41px and then 37px. Measured at 375x667, where these came out at 41px before this rule. */ @media (pointer: coarse) { .button-wrap { min-height: 44px; } } /* Stacked full-width actions are the only sensible arrangement for three buttons this wordy, at every width rather than only under 480px. */ .campaign-actions { display: flex; flex-direction: column; gap: 1rem; list-style: none; padding-left: 0; margin: 0 0 1.5rem 0; } .campaign-actions li { padding-left: 0; } .campaign-actions li > * { width: 100%; } /* main.css sets `outline: 0` on every button and offers nothing in its place, so a keyboard user tabbing through this page would have no idea where they were. Text fields are fine -- they get a white box-shadow on focus -- and so are the tick boxes, whose ::before takes one. Buttons and links do not, and this page is almost entirely buttons. Scoped to the campaign rather than fixed in main.css: the same gap exists on the contact form on the home page, but that is a separate change to a shared file and is recorded in TODO.md instead of being smuggled in here. */ .campaign-page .button:focus-visible, .campaign-page button:focus-visible, .campaign-page a:focus-visible, .campaign-page summary:focus-visible { outline: solid 2px #ffffff; outline-offset: 2px; } /* ------------------------------------------------------------------------- Objection form ------------------------------------------------------------------------- */ /* The reset in main.css zeroes fieldset and legend, which is what we want as a starting point: a fieldset is used here for the grouping a screen reader needs, not for a border. */ .campaign-fieldset { border: 0; padding: 0; margin: 0 0 2rem 0; min-width: 0; } /* A legend cannot be a