/* ============================================================================ THE COUL & GOLD BRIEFING — briefing.css Safe to load on EVERY page. Verified on the home page, the archive, the subscribe page and a post page before shipping. THE RULE THAT GOVERNS THIS FILE Never set a text colour unless the same rule also paints the background it sits on. Colour is the only thing here that is background-dependent, and this site has both navy and ivory surfaces — often inside the same section. That rule was learned expensively. v12 contained `section :is(p,li,td){ color: cream !important }`, which is correct on the navy marketing pages and catastrophic on post pages, where article text sits on IVORY inside a `section`. It would have rendered every newsletter article at about 1.05:1 — invisible. Two further versions repeated the same mistake in narrower form (a hero rule that reached into ivory cards; a `--gdpr-text-color` that landed on navy at 1.23:1). All three were caught by measuring, not by reading. So: fonts, sizes, line-height, measure and spacing apply site-wide, because they are background-agnostic. Colour appears only on the nav bar and on form inputs and buttons — the three surfaces this file paints itself. Scoped to `section` throughout, so beehiiv's nav, consent banner and signup modal keep their own working styles. The old sheet's global `button`, `input` and `h1`–`h6` rules are what broke all three of those. ============================================================================ */ :root { --cg-navy: #0d2345; --cg-navy-deep: #081730; --cg-ink: #24334A; --cg-gold: #C8A45A; --cg-gold-deep: #856016; /* 5.4:1 on ivory. #A67C1B was 3.6:1 and failed. */ --cg-ivory: #FCF9F0; --cg-cream: #f4efe4; --cg-border-soft: rgba(244,239,228,0.12); --cg-serif: 'Cormorant Garamond', Georgia, serif; /* display only, >=24px */ --cg-body: 'Source Serif 4', Georgia, serif; } /* ---- Page frame ---------------------------------------------------------- */ /* This rule paints the background it colours, so it satisfies the governing rule above. Verified first: beehiiv's own theme ALREADY renders body navy on every page measured (/subscribe and /p/... both computed rgb(13,35,69) with no stylesheet loaded at all), so this is not introducing a dark background under light-surface content — it matches what is already there and adds the gradient. It also repairs a latent bug: on /subscribe, body colour computes to rgb(0,0,0) — black on navy — for any text not setting its own colour. Not !important on colour, so beehiiv overlays still win. */ html, body { background-color: var(--cg-navy) !important; background-image: radial-gradient(120% 90% at 50% -10%, rgba(200,164,90,0.09), transparent 55%), linear-gradient(180deg, var(--cg-navy) 0%, var(--cg-navy-deep) 100%) !important; background-attachment: fixed; color: var(--cg-cream); font-family: var(--cg-body); -webkit-font-smoothing: antialiased; } /* ---- Typography: background-agnostic, safe anywhere ---------------------- */ section :is(p, li, td, span, label, a, input, button) { font-family: var(--cg-body); } section :is(h1, h2) { font-family: var(--cg-serif); font-weight: 500; line-height: 1.2; } section :is(h3, h4, h5, h6) { font-family: var(--cg-body); font-weight: 600; line-height: 1.3; } section :is(h1, h2) :is(span, strong, em) { font-family: inherit; font-weight: inherit; } section h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); } section h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); } section h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); } /* Reading settings. Measured before: line-height 1.2–1.5 at 77–113 characters per line. Past ~70 the eye stops reliably finding the next line — the "I keep re-reading the same sentence" effect. */ section :is(p, li) { line-height: 1.7 !important; } section p { max-width: 68ch; } section [style*="Apercu"] { font-family: var(--cg-body) !important; font-weight: 400 !important; letter-spacing: normal; } section [style*="Qlassy"] { font-family: var(--cg-serif) !important; letter-spacing: 0.02em; } section img { max-width: 100%; height: auto; border-radius: 12px; } /* Links: NO colour here. Gold #C8A45A measures 2.24:1 on ivory, and post-page article links sit on ivory inside a `section`. Colour is set per-surface in briefing-home.css. Only the background-agnostic parts are safe site-wide. */ section a { text-decoration: none; transition: color .18s ease; } section :is(p, li) a { border-bottom: 1px solid rgba(200,164,90,0.30); padding-bottom: 1px; } /* Paints its own gradient, so it is background-independent. */ section hr { background: linear-gradient(90deg, transparent, var(--cg-gold), transparent); height: 1px; border: 0; } section :is(a[href*="/toolkits/"], a[href*="/cos-jd"], a[href*="/cos-mtg"]) img { border: 1px solid rgba(200,164,90,0.30); box-shadow: 0 10px 30px rgba(0,0,0,0.35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } section :is(a[href*="/toolkits/"], a[href*="/cos-jd"], a[href*="/cos-mtg"]):hover img { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,0.5); border-color: var(--cg-gold); } img[src*="Blueprint_Band"] { content: url("https://beehiiv-images-production.s3.amazonaws.com/uploads/asset/file/8594fda2-4a11-4ca9-9cb0-27504baab580/Blueprint_Band_v3.png"); object-fit: cover; object-position: top center; } /* ---- Form: background and colour on the same element --------------------- */ /* beehiiv's custom-field inputs carry NO `type` attribute, so `input[type="text"]` never matched them. That is the whole mechanism behind the original bug: the old sheet's `form input { color }` DID match and repainted the text navy, while its `input[type="text"] { background }` did NOT — leaving navy on navy at 1.00:1, with typing literally invisible. The email field, which does carry type="email", went white. Hence the half-broken look. beehiiv styles these via `._14iyvb70`, a class with !important, so we set the custom properties it already reads. */ section [style*="--input-background-color"] { --input-background-color: #FFFFFF !important; --input-text-color: var(--cg-navy) !important; --input-border-color: rgba(200,164,90,0.55) !important; --input-border-width: 1px !important; --input-border-radius: 8px !important; --gap: 10px !important; /* was 4px — adjacent radii read as scalloped */ } section form input { background-color: #FFFFFF !important; color: var(--cg-navy) !important; height: 46px !important; font-size: 15px !important; } section form input[class] { border: 1px solid rgba(200,164,90,0.75) !important; border-radius: 8px !important; } section form input::placeholder { color: #8A8F98 !important; opacity: 1; } section form button { background-color: var(--cg-navy) !important; color: var(--cg-ivory) !important; height: 48px !important; border: none !important; border-radius: 8px !important; font-size: 0.78rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 600 !important; } /* `form` is display:contents, so centre its first real child. */ section form > div { width: 100% !important; max-width: 440px !important; margin-inline: auto !important; } /* Flex was stretching the consent box into a tall rectangle. */ section form input[class][type="checkbox"] { flex: 0 0 auto !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; border-radius: 3px !important; background-color: #FFFFFF !important; } /* Consent row: checkbox top-aligns with the first line of the label. */ section form label { align-items: flex-start !important; } /* NOTE: deliberately NOT setting --gdpr-text-color. The consent line sits on an ivory card on the home page and on navy on /subscribe. Any single value fails one of them — ink measured 1.23:1 on navy. Left to beehiiv's theme. */ /* ---- Nav: we paint the bar, so we paint the text ------------------------- */ :is(header, nav) { background-color: rgba(8,23,48,0.92) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--cg-border-soft) !important; } :is(header, nav) a:not(:has(img)), :is(header, nav) a:not(:has(img)) span { font-family: var(--cg-body) !important; font-weight: 600 !important; font-size: 0.8125rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } :is(header, nav) a:not(:has(img)) { flex: 0 0 auto !important; white-space: nowrap !important; } :is(header, nav) a { color: var(--cg-cream) !important; border-bottom: none !important; } :is(header, nav) a:hover { color: var(--cg-gold) !important; } :is(header, nav) :is(a[href*="/subscribe"], a[href*="/subscribe"] span) { color: var(--cg-navy-deep) !important; } /* ---- Buttons ------------------------------------------------------------- */ /* Deliberately NOT given white-space:nowrap or min-width:fit-content. Those two, applied globally by the old sheet, made beehiiv's consent buttons unshrinkable and pushed the last one 218px outside a 328px bar. */ section :is(button, a[class*="button"], [role="button"]) { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; border-radius: 6px; line-height: 1.2; padding: 14px 24px; max-width: 100%; } /* These paint their own background in the same rule, so the text colour is safe. `section form button` above is more specific for the signup form and still wins there. */ section button { background-color: var(--cg-gold); color: var(--cg-navy-deep); border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.30); } section button:hover { background-color: #d9b876; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.40); } section button span { color: inherit; } /* ---- Responsive + accessibility ------------------------------------------ */ @media (max-width: 1180px) { :is(header, nav) a:not(:has(img)), :is(header, nav) a:not(:has(img)) span { font-size: 0.70rem !important; letter-spacing: 0.06em !important; } } @media (max-width: 768px) { section :is(h1 span, h1 strong, h1 em) { font-size: inherit; } } @media (max-width: 640px) { section :is(button, a[class*="button"]) { width: 100%; white-space: normal; } section form > div { max-width: 100% !important; } section p { max-width: 100%; } } section :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--cg-gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---- Mobile menu drawer -------------------------------------------------- */ /* Found on 2026-08-20 while measuring the post template, and it is on every page. beehiiv renders the phone menu as a panel OUTSIDE
/