/* ============================================================================ The Marblehead Independent — public page theme ---------------------------------------------------------------------------- Source of truth for Listmonk Settings → Appearance → Public → Custom CSS. Paste/apply this file's contents into that field; it is served at /public/custom.css, which loads AFTER /public/static/style.css. APPEND-ONLY: this file never edits Listmonk's base stylesheet or templates. Every rule here is an override layered on top of the stock cascade. Brand values Independent Red #C2261D buttons, "INDEPENDENT" Harbor Black #1E1F21 body text, "The Marblehead" Shell White #FDF9F4 page background Slate Blue #375E97 links Hairline rule #D8CEC2 Muted text #6B645C Georgia serif throughout. Square corners — no border-radius anywhere. ========================================================================== */ /* --- Palette ------------------------------------------------------------- */ :root { --mh-red: #C2261D; --mh-black: #1E1F21; --mh-shell: #FDF9F4; --mh-slate: #375E97; --mh-hairline: #D8CEC2; --mh-muted: #6B645C; --mh-serif: Georgia, "Times New Roman", Times, serif; /* Geometry shared by the card and the footer. The archive link is lifted out of the form and parked on the footer line, so these must stay in sync — see "Footer" at the bottom of this file. */ --mh-wrap-pad: 40px; /* .wrap padding */ --mh-footer-pad-t: 14px; /* footer padding above its text */ --mh-footer-lh: 20px; /* footer line-height */ } /* Square corners, everywhere, unconditionally. */ * { border-radius: 0 !important; } /* --- Page ---------------------------------------------------------------- */ html, body { background: var(--mh-shell); font-family: var(--mh-serif); color: var(--mh-black); } body a { color: var(--mh-slate); text-decoration-color: var(--mh-hairline); } body a:hover { color: var(--mh-black); } /* The card becomes a flat page: no white fill, no border, no shadow. */ .container.wrap { position: relative; /* containing block for the archive link */ background: var(--mh-shell); border: 0; box-shadow: none; padding: var(--mh-wrap-pad); margin-bottom: 0; /* footer is butted directly beneath */ } /* ============================================================================ 1. Nameplate The stock header is an logo. We hide it and set the nameplate as two pseudo-element lines on the surrounding , so the whole nameplate stays a single link and no template change is needed. Equal-width trick: the is inline-block, so it shrinks to the width of its widest line — "The Marblehead". The "INDEPENDENT" line is justified with text-align-last, and its letters are separated by spaces, so justification spreads them to fill exactly that width. The two lines therefore match at ANY font size or fallback face, with no hand-tuned letter-spacing to drift. ========================================================================== */ .header { text-align: center; border-bottom: 1px solid var(--mh-hairline); /* 2. the single hairline */ padding-bottom: 18px; margin-bottom: 22px; } .header .logo img { display: none; } .header .logo a { display: inline-block; text-decoration: none; border: 0; } .header .logo a:hover { color: inherit; } .header .logo a::before { content: "The Marblehead"; display: block; font-family: var(--mh-serif); font-weight: 700; font-size: 44px; line-height: 1; /* tight leading between the two lines */ letter-spacing: -0.01em; color: var(--mh-black); white-space: nowrap; } .header .logo a::after { content: "I N D E P E N D E N T"; display: block; margin-top: 5px; /* tight leading */ font-family: var(--mh-serif); font-weight: 700; font-size: 19px; line-height: 1; color: var(--mh-red); text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } /* --- 3. Tagline ---------------------------------------------------------- */ /* Stock template opens the section with an

Subscribe

; the nameplate already says what this page is, so it is replaced by the standfirst. The child combinator keeps this away from the

Lists

inside .lists. */ section > h2 { display: none; } section::before { content: "Local reporting from Marblehead, free, once a week."; display: block; text-align: center; font-family: var(--mh-serif); font-size: 16px; line-height: 24px; color: var(--mh-muted); margin: 0 0 30px 0; } /* --- 4 & 5. Fields ------------------------------------------------------- */ .form p { margin: 0 0 20px 0; } .form label { display: block; margin-bottom: 7px; font-family: var(--mh-serif); font-size: 12px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mh-black); } .form input[type="email"], .form input[type="text"] { width: 100%; padding: 12px 14px; font-family: var(--mh-serif); font-size: 16px; line-height: 24px; color: var(--mh-black); background: #FFFFFF; border: 1px solid var(--mh-hairline); box-shadow: none; -webkit-appearance: none; appearance: none; } .form input[type="email"]::placeholder, .form input[type="text"]::placeholder { color: #A79E93; } .form input[type="email"]:focus, .form input[type="text"]:focus { border-color: var(--mh-slate); outline: 2px solid rgba(55, 94, 151, 0.35); outline-offset: 0; } /* Listmonk's anti-spam honeypot. Base CSS hides it via `.form .nonce`; this is belt-and-braces so no override above can ever reveal it. */ .form input.nonce { display: none !important; } /* ============================================================================ HIDE THE LIST CHECKBOX One public list, so the checkbox is redundant noise. Hidden with CSS only — the input stays in the DOM and stays CHECKED, and CSS never affects form submission, so `l=` is still posted and the subscriber is still associated with the list. The template is NOT modified and the list is NOT switched to single opt-in. ========================================================================== */ .form .lists { display: none; } /* --- 6. Subscribe button ------------------------------------------------- */ .form .button { display: block; width: 100%; min-width: 0; padding: 15px 20px; border: 0; background: var(--mh-red); color: #FFFFFF; font-family: var(--mh-serif); font-size: 15px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer; -webkit-appearance: none; appearance: none; } .form .button:hover { background: #A61E16; color: #FFFFFF; } .form .button:focus-visible { outline: 2px solid var(--mh-black); outline-offset: 2px; } /* ============================================================================ 7. Footer The stock template renders the archive link inside the form, after the button, and the "Powered by listmonk" line in a separate