/* Theme Name: Protect Our Power SA Theme URI: https://protectourpowersa.org/ Author: Protect Our Power SA Description: Campaign theme for protectourpowersa.org. Poster-derived identity — oxblood, brass, ink — built around the CPS Energy comparison tool and the City of San Antonio budget analysis. Version: 1.6.1 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: protect-our-power */ /* ========================================================================== Tokens Palette sampled from the campaign poster so the site and the printed material read as one thing. ========================================================================== */ :root { --ink: #14120f; --ink-soft: #433c33; --ink-mute: #6f6558; --paper: #f7f2e8; --paper-2: #ece2cf; --card: #fffdf8; --red: #b3221f; --red-dark: #8b1a17; --red-wash: #f6e3e0; --gold: #e8c25a; --gold-dark: #b98f22; --rule: #d9cdb6; --display: "Anton", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif; --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; /* * --wrap is for multi-column furniture: stat cards, the card grid, the * header. --narrow is the reading column, and it is also the width of every * interior page's hero, body copy, tables and the comparison tool, so a page * has one left edge from the headline to the footer. Body copy fills it * rather than sitting in a still-narrower measure inside it — a text column * markedly narrower than the box drawn around it reads as a mistake. */ --wrap: 1320px; --narrow: 1080px; --radius: 4px; } *, *::before, *::after { box-sizing: border-box; } /* * The canvas outside the body box is painted from , not . Without * this, a browser in dark mode paints it near-black and the page appears * letterboxed on anything taller or wider than the content. color-scheme is * declared because this design is light-only — it stops the UA from * dark-ifying form controls and scrollbars against a cream page. */ html { background: var(--paper); color-scheme: light; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--red); } a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .wrap--narrow { max-width: var(--narrow); } .skip-link, .screen-reader-text { position: absolute; left: -9999px; } /* * The header is sticky, so an anchor jump lands the target heading underneath * it — a reader following a "Source" link arrives at the paragraph after the * one they wanted, with no heading visible to tell them they are in the right * place. Clear the header, plus a little air. */ :target { scroll-margin-top: 96px; } @media (max-width: 640px) { :target { scroll-margin-top: 76px; } } .skip-link:focus { left: 12px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); } /* ========================================================================== Display type ========================================================================== */ h1, h2, h3, .display { font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.95; margin: 0 0 0.5em; } h1 { font-size: clamp(2.6rem, 7vw, 5rem); } h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); } h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); } p { margin: 0 0 1.1em; } .lede { font-size: clamp(1.1rem, 2.1vw, 1.35rem); line-height: 1.55; color: var(--ink-soft); } .eyebrow { display: inline-block; margin-bottom: 0.9rem; padding: 0.3rem 0.7rem; font-family: var(--body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); background: var(--red); } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--paper); border-bottom: 4px solid var(--gold); } .site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 76px; } .brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; } .brand img, .brand svg { width: 46px; height: 46px; flex: 0 0 auto; } .brand__name { font-family: var(--display); font-size: 1.32rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; } .brand__name em { font-style: normal; color: var(--gold); } .brand__sub { display: block; margin-top: 3px; font-family: var(--body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #b9ac97; } .nav { display: flex; align-items: center; } /* * wp_nav_menu emits
  • elements. They were previously dropped straight into * the