— 33 authors have no page yet (Sue's
decision pending), so a flat card is the honest rendering: no hover lift,
no pointer, nothing that looks clickable. */
/* Measured off the live GHL directory, 19 Oct 2026: 5 across for the Expert
Series (book covers), 6 across for the compilation sections (headshots). */
.dir-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.dir-grid.is-people{grid-template-columns:repeat(6,1fr);gap:24px}
.dir-card{
display:flex;flex-direction:column;justify-content:center;gap:4px;
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:20px 22px;min-height:84px;transition:.2s;
}
.dir-card .n{font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;font-weight:700;line-height:1.3}
.dir-card .r{font-size:.82rem;color:var(--ink-soft)}
a.dir-card{border-left:3px solid var(--purple)}
a.dir-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(102,40,189,.14);border-color:var(--purple)}
a.dir-card .n::after{content:" \2192";color:var(--purple);font-family:Inter,sans-serif;font-size:.9rem}
.dir-card.is-plain{background:var(--wash);border-style:dashed;color:var(--ink-soft)}
.dir-card.is-plain .n{font-weight:700;color:var(--ink)}
/* ---------------------------------------------------------------------------
Directory cards with pictures — two kinds, matching the live GHL site
---------------------------------------------------------------------------
Measured from https://bwpexpert.org/author-directory on 19 Oct 2026. The
live site uses the SAME card shell in two ways, and the difference matters:
.is-cover Expert Series. The picture is the author's BOOK COVER, shown
whole on a pale tint with generous padding (object-fit:contain,
nothing cropped) — the author's own photo is already printed on
the cover, so a separate headshot would be redundant.
.has-pic Compilation sections. The picture is the author's HEADSHOT,
filling the full card width edge to edge (object-fit:cover),
because those authors share one book between dozens of them.
Both: white card, 16px radius, 1px border, name centred underneath on two
lines (first name, then surname), no padding on the card itself.
--------------------------------------------------------------------------- */
.dir-card.has-pic,
.dir-card.is-cover{
flex-direction:column;align-items:stretch;gap:0;
padding:0;overflow:hidden;min-height:0;text-align:center;
border-radius:16px;
}
/* --- book-cover card (Expert Series) --- */
.dir-card.is-cover .pic{
display:flex;align-items:center;justify-content:center;
aspect-ratio:1/1.18;padding:25px;background:linear-gradient(170deg,#faf8ff,#f3eefb);
}
.dir-card.is-cover .pic img{
max-width:100%;max-height:100%;width:auto;height:auto;
object-fit:contain;box-shadow:0 6px 18px rgba(58,44,88,.22);
}
/* --- headshot card (compilation volumes) --- */
.dir-card.has-pic .pic{
display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--wash-2);
}
.dir-card.has-pic .pic img{
width:100%;height:100%;object-fit:cover;object-position:center top;
}
/* --- shared name block: first name over surname, as the live site does --- */
.dir-card.has-pic .n,
.dir-card.is-cover .n{
flex:0 0 auto;padding:16px 12px 18px;font-size:1.02rem;line-height:1.28;
}
.dir-card .n .fn,
.dir-card .n .sn{display:block}
.dir-card.has-pic .r,
.dir-card.is-cover .r{
flex:0 0 auto;align-self:center;margin:0 0 16px;
font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:#8a6200;background:rgba(248,198,48,.2);border-radius:999px;padding:4px 11px;
}
/* the name block already carries the bottom padding; drop it when a badge follows */
.dir-card.has-pic .n:has(+ .r),
.dir-card.is-cover .n:has(+ .r){padding-bottom:10px}
/* the arrow belongs on a text card, not a picture card */
a.dir-card.has-pic .n::after,
a.dir-card.is-cover .n::after{content:none}
/* flat border like the live site; the lift on hover is ours and worth keeping */
a.dir-card.has-pic,
a.dir-card.is-cover{border-left:1px solid var(--line)}
a.dir-card.has-pic:hover,
a.dir-card.is-cover:hover{border-color:var(--purple)}
/* bookstore: cover + title + author + category */
.bookstore-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.bookstore-card{
background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
display:flex;flex-direction:column;transition:.2s;
}
.bookstore-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(58,44,88,.16)}
.bookstore-card .cover{background:var(--wash);padding:22px 22px 0}
.bookstore-card .cover img{width:100%;border-radius:4px;box-shadow:0 10px 22px rgba(58,44,88,.2)}
.bookstore-card .meta{padding:20px 22px 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.bookstore-card .cat{font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--teal)}
.bookstore-card .t{font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;font-weight:700;line-height:1.3}
.bookstore-card .a{font-size:.86rem;color:var(--ink-soft)}
.bookstore-card .links{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:12px;font-size:.84rem;font-weight:600}
.bookstore-card .links a{color:var(--purple);border-bottom:1px solid var(--line)}
.bookstore-card .links a:hover{border-bottom-color:var(--purple)}
/* plain (non-clickable) bookstore card — the .dir-card.is-plain equivalent.
Used on petbusinessowners.html for the five pet authors who have no page:
flat, dashed, no hover lift, nothing that looks clickable. */
.bookstore-card.is-plain{background:var(--wash);border-style:dashed}
.bookstore-card.is-plain:hover{transform:none;box-shadow:none}
.bookstore-card.is-plain .t{color:var(--ink)}
/* category filter chips. Filtering itself is JS progressive enhancement —
every book must be present in the markup and visible with JS off. */
.cat-filters{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 38px}
.cat-filters button,.cat-filters a{
border:1px solid var(--line);background:#fff;border-radius:999px;
padding:9px 17px;font:600 .84rem/1.2 Inter,sans-serif;color:var(--ink-soft);
cursor:pointer;transition:.18s;min-height:40px;
}
.cat-filters button:hover,.cat-filters .is-active{background:var(--purple);color:#fff;border-color:var(--purple)}
/* empty category — "Claim This Category" */
.cat-empty{
background:#fff;border:2px dashed var(--line);border-radius:18px;
padding:30px 26px;text-align:center;
}
.cat-empty h3{font-size:1.1rem;margin-bottom:8px}
.cat-empty p{font-size:.92rem;color:var(--ink-soft);margin-bottom:18px}
/* directory search box */
.dir-search{display:flex;gap:12px;flex-wrap:wrap;max-width:34rem;margin-top:24px}
.dir-search input{
flex:1;min-width:200px;border:1.5px solid var(--line);border-radius:999px;
padding:14px 22px;font:400 1rem Inter,sans-serif;color:var(--ink);background:#fff;min-height:48px;
}
.dir-search input:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px var(--wash-2)}
/* ===========================================================================
11. SALES-PAGE EXTRAS
expert-series.html, builtwithpurpose.html
=========================================================================== */
/* wide price comparison band */
.price-band{background:var(--wash)}
/* align-items:stretch (the default) is deliberate, NOT align-items:start: the
cards hold different amounts of copy, and only equal-height cards let
.price-card .bonus-note{margin-top:auto} push both buttons onto the same
line. Setting align-items:start here collapses each card to its own content
height and the shorter card's button floats halfway up the row. */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px}
.price-card{
background:#fff;border:1px solid var(--line);border-radius:22px;padding:38px 32px 32px;
display:flex;flex-direction:column;position:relative;
}
.price-card.featured{border:2px solid var(--purple);box-shadow:0 18px 44px rgba(102,40,189,.15)}
/* three-up variant (sponsor-author.html). Must be a class, not an inline
grid-template-columns, or it wins over the responsive rules below. */
.price-grid.three{grid-template-columns:repeat(3,1fr);gap:22px}
.price-card .badge{
position:absolute;top:-13px;left:32px;background:var(--gold);color:var(--ink);
border-radius:999px;padding:6px 18px;font-size:.72rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
}
.price-card h3{font-size:1.5rem;margin-bottom:6px}
.price-card .amount{font-family:"Playfair Display",Georgia,serif;font-size:2.5rem;font-weight:800;color:var(--purple);margin:10px 0 6px}
.price-card .amount small{display:block;font:600 .78rem/1.4 Inter,sans-serif;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase}
/* "The two differences:" label above the second card's list. The simplified
pricing (21 Oct 2026) has card one list what you GET and card two list only
what is DIFFERENT, so this line tells the reader the short list is the point
rather than an oversight. */
.price-card .card-diff{
font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--purple);margin-top:20px;
}
.price-card .card-diff + ul{margin-top:12px}
.price-card ul{list-style:none;margin:18px 0 26px;display:flex;flex-direction:column;gap:11px}
.price-card li{position:relative;padding-left:26px;font-size:.95rem;color:var(--ink-soft)}
.price-card li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--teal);font-weight:700}
.price-card .btn,.price-card .btn-ghost{margin-top:auto;width:100%}
/* note printed under a DonorPerfect CTA while per-offer links are unconfirmed */
.checkout-note{font-size:.82rem;color:var(--ink-soft);margin-top:12px;text-align:center;line-height:1.5}
/* same note on the purple closing band — the default ink grey is unreadable there */
.final .checkout-note{color:rgba(255,255,255,.82);max-width:34rem;margin:18px auto 0}
.final .checkout-note strong{color:#fff}
/* saving / upgrade callout */
.bonus-note{
margin-top:30px;background:#fff;border:2px dashed var(--gold);border-radius:18px;
padding:26px 28px;text-align:center;
}
.bonus-note strong{font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;color:var(--purple);display:block;margin-bottom:8px}
.bonus-note p{font-size:.94rem;color:var(--ink-soft)}
.bonus-note p + p{margin-top:9px}
.bonus-note p strong{
display:inline;font-family:inherit;font-size:inherit;color:var(--ink);margin-bottom:0;
}
/* Scarcity line inside a bonus box. Deliberately understated: the claim does
the work, so it does not need shouting. Both claims are REAL — the Volume 2
bonus genuinely ends when the book fills, and cover positions are genuinely
capped. Never add a scarcity line that is not actually true. */
.bonus-note .scarce{
font-size:.84rem;font-weight:700;color:var(--teal);
}
/* The two price cards hold different amounts of copy (card one lists what you
get, card two lists only what differs), so without this the shorter card's
button floats halfway up the row. margin-top:auto pushes the bonus box and
everything after it to the bottom, lining both buttons up on the same line. */
.price-card .bonus-note{margin-top:auto}
/* The one-sentence BENEFIT at the top of a price card, before the feature copy.
Card two leads with what the buyer actually gets out of it (their face on a
book cover) rather than a longer list, so this sits bigger than body text
and in the ink colour to carry the weight of a claim. */
.price-card .lead-benefit{
font-family:"Playfair Display",Georgia,serif;font-size:1.16rem;line-height:1.5;
color:var(--ink);margin:4px 0 14px;
}
/* ---------------------------------------------------------------------------
3D book — .book3d
Turns a flat cover JPEG into a book standing at a slight angle, built purely
in CSS so no new artwork is needed and any cover can be swapped in.
How it works: the wrapper tilts in 3D, a dark gradient down the left edge
becomes the spine, and a second gradient to its left becomes the visible
page block. The image itself is never distorted or cropped.
It sits at the TOP of a price card. Mid-card (its first position, 21 Oct
2026) a narrow centred cover split the copy in two and left a band of white
space down both sides, which is exactly what Sue flagged.
--------------------------------------------------------------------------- */
/* Top row of a price card: wording on the left, the book on the right
(Sue, 21 Oct 2026). A centred book above the copy left white space down both
sides; beside the text it fills the row and the eye reads price then product.
Collapses to one column at 760px with the book first, so on a phone the
cover still leads the card. */
.card-intro{
display:grid;grid-template-columns:1fr 11.5rem;gap:22px;align-items:center;
margin-bottom:6px;
}
/* Featured Expert shows TWO separated books, so its column needs real room. */
.card-intro:has(.book3d-pair){grid-template-columns:1fr 17rem}
.card-intro-text{min-width:0}
.card-intro .book3d{margin:0;max-width:none}
/* single-book cards: a touch larger now the pair sets the scale */
.card-intro .book3d:not(.book3d-pair) .book3d-wrap{width:88%;margin:0 auto}
@media(max-width:760px){
.card-intro{grid-template-columns:1fr;gap:18px;justify-items:center;text-align:center}
.card-intro .book3d{order:-1;max-width:10rem}
.card-intro-text{text-align:center}
}
.book3d{
margin:4px auto 20px;width:100%;max-width:11.5rem;text-align:center;
perspective:1100px;
}
.book3d-wrap{
display:block;position:relative;
transform:rotateY(-21deg) rotateX(2deg);
transform-style:preserve-3d;
transition:transform .4s ease;
}
.book3d-wrap img{
display:block;width:100%;height:auto;position:relative;z-index:2;
border-radius:2px 5px 5px 2px;
box-shadow:14px 18px 34px rgba(58,44,88,.34);
}
/* the spine: a dark band down the left edge of the cover */
.book3d-wrap::before{
content:"";position:absolute;z-index:3;top:0;bottom:0;left:0;width:11px;
background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.10) 62%,rgba(255,255,255,.16));
border-radius:2px 0 0 2px;
}
/* the page block: sits just left of the spine, giving the book thickness */
.book3d-wrap::after{
content:"";position:absolute;z-index:1;top:1.4%;bottom:1.4%;left:-9px;width:12px;
background:repeating-linear-gradient(90deg,#efe9f7 0 1px,#fbf9ff 1px 3px);
border-radius:3px 0 0 3px;
box-shadow:-2px 2px 5px rgba(58,44,88,.16);
}
/* straightens a little on hover, which reads as "pick it up" */
.price-card:hover .book3d-wrap{transform:rotateY(-13deg) rotateX(1deg)}
.book3d figcaption{
margin-top:22px;font-size:.84rem;font-weight:600;color:var(--purple);
}
@media(max-width:560px){
.book3d{max-width:9.5rem}
}
/* ---------------------------------------------------------------------------
Two books side by side — .book3d-pair
Featured Expert buys the author's OWN book and the Volume 2 cover slot, so
the card shows both. They overlap slightly, the rear one sitting a little
back and lower, which reads as a pair on a shelf rather than two flat
thumbnails. Each still uses .book3d-wrap, so both keep their spine and page
block for free.
--------------------------------------------------------------------------- */
/* NOT overlapping (Sue, 21 Oct 2026): overlapped books read as one object, and
the whole point of this card is that the buyer gets TWO books with their
photo on both covers. A clear gap between them makes that unmissable. */
.book3d-pair .pair-books{
display:flex;align-items:flex-end;justify-content:center;gap:16px;
}
.book3d-pair .book3d-wrap{width:50%;flex:0 0 50%;margin:0}
/* Volume 2 stays the hero — the cover placement is what this tier uniquely
buys — so the author's own Expert Book is a little smaller beside it rather
than behind it. Markup order is Expert Book then Volume 2. */
.book3d-pair .book3d-wrap:first-child{
transform:rotateY(-17deg) rotateX(2deg) scale(.88);
}
.book3d-pair .book3d-wrap:last-child{
transform:rotateY(-17deg) rotateX(2deg);
}
.price-card:hover .book3d-pair .book3d-wrap:first-child{
transform:rotateY(-9deg) rotateX(1deg) scale(.88);
}
.price-card:hover .book3d-pair .book3d-wrap:last-child{
transform:rotateY(-9deg) rotateX(1deg);
}
.book3d-pair figcaption em{font-style:normal;color:var(--ink)}
@media(max-width:760px){
.card-intro:has(.book3d-pair){grid-template-columns:1fr}
.card-intro .book3d-pair{max-width:17rem}
}
/* Struck-through previous price above the current one. $1,997 WAS the live
Expert Series price (confirmed 4 Aug 2026, and the only price that had sold)
before it came down to $1,297, so "Regularly $1,997" is a true statement and
not invented anchoring. Do not use this class for a price that never ran. */
.price-card .amount .was{
display:block;font:600 .95rem/1.3 Inter,sans-serif;color:var(--ink-soft);
text-decoration:line-through;text-transform:none;letter-spacing:0;margin-bottom:2px;
}
/* FAQ —
/, works with JS off */
.faq{max-width:50rem;margin:44px auto 0}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
.faq-item summary{
cursor:pointer;list-style:none;padding:20px 54px 20px 24px;position:relative;
font-family:"Playfair Display",Georgia,serif;font-size:1.06rem;font-weight:700;min-height:48px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
color:var(--purple);font:700 1.5rem/1 Inter,sans-serif;
}
.faq-item[open] summary::after{content:"\2013"}
.faq-item summary:hover{color:var(--purple)}
.faq-item .faq-body{padding:0 24px 22px;color:var(--ink-soft);font-size:.95rem}
.faq-item .faq-body p{margin-bottom:11px}
.faq-item .faq-body p:last-child{margin-bottom:0}
/* footnote text, e.g. the 25 front-cover positions note */
.footnote{font-size:.84rem;color:var(--ink-soft);max-width:44rem;margin-top:26px;line-height:1.6}
/* ===========================================================================
12. LEGAL / LONG-PROSE PAGES
terms-and-conditions.html, privacy-policy.html, about-us.html
Measure capped near 68 characters; text is contractual and must stay readable.
=========================================================================== */
.prose{max-width:46rem;margin:0 auto}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:48px 0 14px;scroll-margin-top:110px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;margin:30px 0 10px}
.prose p{color:var(--ink-soft);margin-bottom:15px;font-size:1rem;line-height:1.75}
.prose ul,.prose ol{margin:0 0 16px 24px;color:var(--ink-soft)}
.prose li{margin-bottom:9px;line-height:1.7}
.prose strong{color:var(--ink)}
/* Body links inside prose. :not(.btn...) matters: without it this rule also
repainted BUTTONS inside a .prose block, putting purple text on a purple
background so the label vanished entirely (about-us, 21 Oct 2026). Any new
button class used inside prose must be excluded here too. */
.prose a:not(.btn):not(.btn-ghost):not(.btn-white):not(.btn-gold):not(.btn-outline-white){
color:var(--purple);border-bottom:1px solid var(--line);word-break:break-word;
}
.prose a:not(.btn):not(.btn-ghost):not(.btn-white):not(.btn-gold):not(.btn-outline-white):hover{
border-bottom-color:var(--purple);
}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose .effective{
display:inline-block;background:var(--wash-2);color:var(--purple);border-radius:999px;
padding:7px 18px;font-size:.8rem;font-weight:700;margin-bottom:32px;
}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.93rem}
.prose th,.prose td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.prose th{background:var(--wash);font-weight:700;color:var(--ink)}
/* clause index at the top of a long legal page */
.section-index{
background:var(--wash);border:1px solid var(--line);border-radius:18px;
padding:28px 30px;margin-bottom:46px;
}
.section-index h2{font-size:1.15rem;margin:0 0 16px}
.section-index ol{list-style:decimal;margin:0 0 0 20px;columns:2;column-gap:34px}
.section-index li{margin-bottom:8px;font-size:.92rem;break-inside:avoid}
.section-index a{color:var(--purple)}
.section-index a:hover{text-decoration:underline}
/* ===========================================================================
13. ENQUIRY FORMS
custom-publishing.html (and anywhere email capture lands later).
The form's action is a single commented placeholder in the HTML — Sue has
not supplied the GoHighLevel endpoint. Never add a second one.
=========================================================================== */
.form-card{
background:#fff;border:1px solid var(--line);border-radius:22px;
padding:40px 36px;max-width:40rem;margin:0 auto;
box-shadow:0 18px 44px rgba(102,40,189,.10);
}
.form-card h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:10px}
.form-card .form-intro{color:var(--ink-soft);font-size:.98rem;margin-bottom:28px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.field label{font-size:.88rem;font-weight:600;color:var(--ink)}
.field .hint{font-size:.81rem;color:var(--ink-soft);font-weight:400}
.field input,.field select,.field textarea{
border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;
font:400 1rem Inter,sans-serif;color:var(--ink);background:#fff;width:100%;min-height:48px;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
outline:0;border-color:var(--purple);box-shadow:0 0 0 3px var(--wash-2);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.required{color:var(--purple)}
.consent{display:flex;align-items:flex-start;gap:11px;margin:4px 0 24px;font-size:.87rem;color:var(--ink-soft);line-height:1.6}
.consent input{width:20px;height:20px;min-height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--purple)}
.consent a{color:var(--purple);border-bottom:1px solid var(--line)}
.form-card .btn{width:100%}
.form-foot{font-size:.84rem;color:var(--ink-soft);margin-top:16px;text-align:center}
.form-foot a{color:var(--purple);font-weight:600;border-bottom:1px solid var(--line)}
.form-foot a:hover{border-bottom-color:var(--purple)}
/* ---------------------------------------------------------------------------
Google Form call to action — .form-link
The enquiry form is a Google Form, LINKED rather than embedded (Sue's
decision, 19 Oct 2026): an iframed Google Form brings its own typography
and the page's styling visibly stopped at the frame edge. The button keeps
the page BWP's throughout and the form opens in its own tab.
--------------------------------------------------------------------------- */
.form-link{text-align:center;margin-top:26px}
.form-link .btn{min-width:16rem}
.form-link-note{
font-size:.86rem;color:var(--ink-soft);margin-top:14px;
}
@media(max-width:560px){
.form-link .btn{width:100%;min-width:0}
}
/* ---------------------------------------------------------------------------
Photo figure inside a benefits section — .ben-photo
A 3:2 landscape slot with a caption, matching the full uncropped 1500x1000
source frame: the ratio is deliberately NOT 16:9, because cropping to a
letterbox cut the top and bottom off the photograph. Kept modest in width
so it reads as supporting evidence beside the benefit cards rather than a
second hero. The slot holds its shape whether it contains the real