/* ============================================================================
THE COUL & GOLD BRIEFING — briefing-page.css
THE INNER PAGES ONLY: /subscribe /login /archive /contact /workwithus
/authors /faqs /upgrade /resources-toolkits. NOT the home page, NOT posts.
WHY THIS FILE EXISTS
Every inner page currently carries its own hand-pasted embed holding SEVEN
stacked blocks: v7, v8, v9, v10, the .cgft footer (CSS *and* markup), v10.2
and v10.3. Verified byte-for-byte identical on /subscribe and /login. That
is the "all over the place" problem in its rawest form — four vintages of
the same rules fighting each other, plus a full copy of the footer, times
nine pages.
This file is those blocks, deduplicated once, so each page's embed collapses
to six tags plus the footer markup.
LOAD ORDER MATTERS AND IS DELIBERATE
This file must be linked AFTER briefing.css. Several rules here intentionally
override it at equal specificity, which only works because later wins:
- `img[src*="Blueprint_Band"]` — briefing.css forces the v3 asset (correct
on the home page). Inner pages have been showing v4 at 400px since the
v9 block. Loading this file second preserves exactly what each surface
shows today, so nothing moves visually and no decision is needed.
THE ONE THING THAT IS NOT A STRAIGHT COPY
The old blocks styled h1 with a BARE `h1, h1 span { ... !important }`.
Unscoped, with `-webkit-text-fill-color`. That reaches beehiiv's own login
modal, signup modal and consent banner — it is the same class of bug that
broke all three components in the first place. Scoped to `section` here.
Gold #C8A45A on navy measures 6.63:1, so the colour itself is fine.
============================================================================ */
/* ---- Header band --------------------------------------------------------- */
/* Consolidated from v7 / v8 / v9, which defined this three times with three
different assets and heights. v9 was the one actually winning; it is kept. */
img[src*="Blueprint_Band"] {
content: url("https://beehiiv-images-production.s3.amazonaws.com/uploads/asset/file/d62b9e74-2646-4aad-aee7-79331c178cb6/Blueprint_Band_v4.png");
height: min(400px, 100%) !important;
object-fit: cover !important;
object-position: center center !important;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0) 98%);
mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0) 98%);
}
section:has(img[src*="Blueprint_Band"]) {
min-height: 400px !important;
background-color: #0D2345 !important;
}
/* ---- Page title ---------------------------------------------------------- */
/* Gold #C8A45A is 6.63:1 on navy and only 2.24:1 on ivory, so this rule has to
reach the page title and nothing else.
`section h1` is too broad, and measurably so. beehiiv's PRICING component
renders each tier name as an `
` too — "Paid Subscription" — sitting on
the ivory card at depth 11. A blanket `section h1 { color: gold }` paints it
gold on ivory at 2.24:1. The original hand-pasted block had exactly this bug
in an even broader form (bare `h1, h1 span`), so this is a pre-existing
failure being fixed, not a new one being avoided.
Child combinators separate them structurally rather than by class name:
the page title sits 2-3 levels below the section (/login depth 2,
/subscribe depth 3); the pricing tier name sits at 11. Deliberately NOT
keyed to beehiiv's `v3sg6r0`-style hashes — those are build artefacts that
change on redeploy, which is the same fragility that made the old
`_1ma1r0q` nav rules unreliable. */
section > h1,
section > div > h1,
section > div > div > h1,
section > h1 span,
section > div > h1 span,
section > div > div > h1 span {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: #C8A45A !important;
-webkit-text-fill-color: #C8A45A !important;
font-weight: 600 !important;
}
section > h1::after,
section > div > h1::after,
section > div > div > h1::after {
content: "";
display: block;
width: 76px;
height: 2px;
margin: 16px auto 0;
background: linear-gradient(90deg, rgba(200,164,90,0), #C8A45A 30%, #C8A45A 70%, rgba(200,164,90,0));
}
/* ---- Hide the superseded signup card ------------------------------------- */
/* From v10.2. The old signup section sat below the new footer. Matched on its
placeholder text because it carries no stable id or class. */
section:has(input[placeholder*="Company"]),
div.node-section:has(input[placeholder*="Company"]),
section:has(input[placeholder*="Position"]) {
display: none !important;
}
/* ---- Footer -------------------------------------------------------------- */
/* CHANGED FROM THE ORIGINAL: the footer was the last thing on the site still
pulling 'Manrope' and 'Playfair Display'. That is seven extra font files for
one block, and it is why the font count never dropped after the rest of the
site moved to Cormorant Garamond + Source Serif 4. Swapped to the brand
pair. Layout, spacing and colour are untouched — only the typeface changes.
This is a visible change: worth a look before publishing. */
.cgft {
background: #0C1626;
border-top: 1px solid rgba(253,248,238,0.12);
padding: 60px 40px 40px;
font-family: 'Source Serif 4', Georgia, serif;
text-align: left;
}
.cgft .cols {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 36px;
}
.cgft .wm {
font-size: 15px;
letter-spacing: 2.1px;
text-transform: uppercase;
color: #FDF8EE;
margin-bottom: 12px;
font-weight: 400;
}
.cgft .wm b { color: #C8A45A; font-weight: 400; }
.cgft .tagline {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
color: #C8A45A;
font-size: 19px;
line-height: 1.5;
margin: 0 0 16px;
}
.cgft .addr {
font-size: 12px;
color: rgba(253,248,238,0.62);
line-height: 1.7;
margin: 0;
}
.cgft h4 {
color: #C8A45A !important;
font-size: 11px !important;
letter-spacing: 2.2px;
text-transform: uppercase;
font-weight: 700 !important;
margin: 0 0 14px;
font-family: 'Source Serif 4', Georgia, serif !important;
}
.cgft ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cgft li { margin-bottom: 9px; color: #FDF8EE; }
.cgft a {
color: #FDF8EE !important;
text-decoration: none !important;
font-size: 13.5px !important;
letter-spacing: 0.36px;
font-weight: 400 !important;
border: none !important;
transition: color .15s;
font-family: 'Source Serif 4', Georgia, serif !important;
text-transform: none !important;
}
.cgft a:hover { color: #C8A45A !important; }
.cgft .bottom {
max-width: 1080px;
margin: 44px auto 0;
padding-top: 20px;
border-top: 1px solid rgba(253,248,238,0.12);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
color: rgba(253,248,238,0.62);
}
.cgft .bottom a {
font-size: 12px !important;
margin-left: 18px;
color: rgba(253,248,238,0.78) !important;
}
@media (max-width: 820px) {
.cgft .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.cgft { padding: 44px 20px 32px; }
.cgft .cols { grid-template-columns: 1fr; gap: 28px; }
.cgft .bottom { flex-direction: column; }
.cgft .bottom a { margin-left: 0; display: block; margin-top: 6px; }
}
/* ---- DELIBERATELY NOT CARRIED OVER --------------------------------------- */
/* The v10 / v6.2 nav rules. They set the nav to 'Lora' via
`div[class*="navbar-list"]` and `nav[class*="_1ma1r0q"]` — obfuscated build
hashes that change whenever beehiiv redeploys, and 'Lora' is the font the
whole site moved off. briefing.css already styles the nav through
`:is(header, nav)`, which does not depend on a hash. Keeping both would have
them fight, and a nav that renders two typefaces at once is the exact
complaint that started this job. */
/* ---- Pricing component --------------------------------------------------- */
/* beehiiv's pricing block paints the price and the cadence in the theme gold,
on the ivory card. Measured on /upgrade:
$15.00 #CCAD7B on #FDF9F0 = 2.03:1
/month #D0932E on #FDF9F0 = 2.53:1
"Editions alternate ..." #CCAD7B on #FDF9F0 = 2.03:1
Those are the three pieces of text on the page that decide whether somebody
pays. Keyed to Tailwind utility classes rather than beehiiv's `sks75p6`
build hashes; verified to match exactly those three elements and nothing
else. */
section p.leading-none {
color: #0D2345 !important;
}
section div.flex.flex-col.gap-y-4 > p.text-sm {
color: #24334A !important;
}