/*
Theme Name: Brian Thompson Writes – Custom
Theme URI: https://brianthompsonwrites.com
Author: Brian Thompson / ChatGPT
Description: Minimal custom theme for BrianThompsonWrites.com – no page builders, clean header, custom layouts.
Version: 0.1
Text Domain: btw-custom
*/
/* ==== BASIC RESET ==== */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Lora", Georgia, "Times New Roman", serif;
font-size: 18px;
line-height: 1.7;
color: #f9fafb;
/* Full-page gradient so there’s no hard “central column” edge */
background: radial-gradient(circle at top left, #1f2937 0, #050608 38%, #020308 100%);
}
/* Links */
a {
color: #00c2ff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: "Philosopher", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 700;
letter-spacing: 0.03em;
color: #f9fafb;
margin-top: 0;
}
h1 {
font-size: clamp(2.2rem, 4vw, 2.8rem);
line-height: 1.2;
}
h2 {
font-size: clamp(1.7rem, 3vw, 2.1rem);
}
h3 {
font-size: clamp(1.4rem, 2.2vw, 1.7rem);
}
/* Content wrappers */
.bt-site-main {
max-width: 1120px;
margin: 0 auto;
padding: 0 1.5rem 3rem;
}
.bt-page-wrap {
max-width: 760px;
margin: 0 auto;
}
.bt-page-content p {
margin-bottom: 1.1rem;
}
/* ===== HEADER & NAV ===== */
.bt-site-header {
position: sticky;
top: 0;
z-index: 60;
background: linear-gradient(
to bottom,
rgba(2, 6, 23, 0.96),
rgba(2, 6, 23, 0.92)
);
border-bottom: 1px solid rgba(30, 64, 175, 0.45);
backdrop-filter: blur(10px);
}
/* Respect the admin bar offset when logged in */
.admin-bar .bt-site-header {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .bt-site-header {
top: 46px;
}
}
.bt-header-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0.55rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* Header right: nav + primary CTA */
.bt-header-right {
display: flex;
align-items: center;
gap: 1rem;
}
/* Mobile: let nav wrap under the CTA */
@media (max-width: 900px) {
.bt-header-right {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.75rem;
}
.bt-nav {
flex: 1 1 100%;
justify-content: flex-end;
}
.bt-nav-cta {
order: 1;
}
}
/* Brand area (logo + tagline) */
.bt-header-brand {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
}
.bt-header-brand img {
max-height: 48px;
width: auto;
height: auto;
}
.bt-header-tagline {
font-size: 0.78rem;
color: #9ca3af;
max-width: 260px;
line-height: 1.4;
}
/* Right side: nav + CTA */
.bt-header-right {
display: flex;
align-items: center;
gap: 0.75rem;
margin-left: auto;
}
/* Desktop nav */
.bt-nav {
display: flex;
align-items: center;
}
.bt-nav-list {
list-style: none;
display: flex;
gap: 0.9rem;
margin: 0;
padding: 0;
font-size: 0.9rem;
}
.bt-nav-list li {
position: relative;
}
.bt-nav-list li a {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.75rem;
border-radius: 999px;
color: #e5f6ff;
text-decoration: none;
transition:
background-color 120ms ease,
color 120ms ease,
box-shadow 120ms ease,
transform 120ms ease;
}
/* Hover / focus – subtle pill */
.bt-nav-list li a:hover,
.bt-nav-list li a:focus-visible {
background: rgba(15, 23, 42, 0.95);
color: #00c2ff;
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5);
outline: none;
}
/* Active/current menu item */
.bt-nav-list li.current-menu-item > a,
.bt-nav-list li.current_page_item > a {
background: #00c2ff;
color: #020617;
box-shadow: 0 12px 30px rgba(0, 194, 255, 0.4);
}
/* Global primary CTA in header */
.bt-nav-cta {
padding: 0.6rem 1.3rem;
font-size: 0.8rem;
box-shadow: 0 14px 32px rgba(0, 194, 255, 0.5);
}
/* ===== Dropdown (Reading Order, etc.) ===== */
.bt-nav-list li ul {
list-style: none;
margin: 0;
padding: 0.35rem 0.4rem;
position: absolute;
left: 0;
top: calc(100% + 0.25rem);
background: rgba(15, 23, 42, 0.98);
border-radius: 0.75rem;
border: 1px solid rgba(55, 65, 81, 0.9);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
min-width: 190px;
display: none;
z-index: 65;
}
/* Tighten gap between top nav item and its dropdown */
.bt-nav-list li ul {
margin-top: -0.1rem;
}
.bt-nav-list li:hover > ul {
display: block;
}
.bt-nav-list li ul li a {
width: 100%;
border-radius: 0.6rem;
padding: 0.35rem 0.7rem;
box-shadow: none;
}
.bt-nav-list li ul li a:hover {
background: rgba(30, 64, 175, 0.65);
color: #f9fafb;
}
/* ===== Burger / mobile nav ===== */
.bt-nav-toggle {
display: none;
border: 1px solid rgba(148, 163, 184, 0.9);
background: rgba(15, 23, 42, 0.9);
color: #f9fafb;
font-size: 1.25rem;
border-radius: 999px;
padding: 0.2rem 0.7rem;
cursor: pointer;
line-height: 1;
}
.bt-nav-toggle span {
display: block;
}
/* Mobile layout */
@media (max-width: 900px) {
.bt-header-inner {
flex-wrap: wrap;
align-items: flex-start;
}
.bt-header-tagline {
max-width: 100%;
}
.bt-header-right {
width: 100%;
order: 3;
flex-direction: column;
align-items: stretch;
margin-left: 0;
}
.bt-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
order: 2;
}
.bt-nav {
width: 100%;
display: none;
margin-top: 0.6rem;
}
.bt-nav.bt-nav--open {
display: block;
}
.bt-nav-list {
flex-direction: column;
gap: 0.25rem;
}
.bt-nav-list li a {
width: 100%;
justify-content: flex-start;
padding: 0.45rem 0.6rem;
}
/* Dropdown behaves like nested items instead of floating */
.bt-nav-list li ul {
position: static;
box-shadow: none;
border-radius: 0.6rem;
border: none;
background: transparent;
padding: 0.1rem 0 0.25rem 0.75rem;
display: none;
}
.bt-nav-list li:hover > ul {
display: block;
}
.bt-nav-cta {
width: 100%;
justify-content: center;
margin-top: 0.4rem;
}
}
/* ===== SECTIONS & LAYOUT UTILITIES ===== */
.bt-section {
padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bt-section--dark {
background: transparent; /* let the body gradient show through */
color: #f9fafb;
}
.bt-section--bordered {
border-top: 1px solid #1f2937;
}
.bt-grid {
display: grid;
gap: clamp(1.75rem, 3vw, 2.5rem);
}
.bt-grid--2col {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
.bt-grid--2col {
grid-template-columns: minmax(0, 1fr);
}
}
/* Cards & badges */
.bt-card {
background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.16), #020617 56%);
border-radius: 1.25rem;
border: 1px solid rgba(148, 163, 184, 0.5);
padding: 1.5rem clamp(1.5rem, 3vw, 2rem);
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.7);
}
.bt-card--light {
background: #ffffff;
border-color: #e5e7eb;
color: #111827;
}
.bt-badge-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.2rem;
}
.bt-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #e5e7eb;
}
.bt-badge--accent {
border-color: #00c2ff;
color: #a5e9ff;
}
/* Buttons */
.bt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.85rem 1.6rem;
border-radius: 999px;
font-family: "Philosopher", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.12em;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.bt-btn--primary {
background-color: #00c2ff;
color: #121212;
box-shadow: 0 18px 45px rgba(0, 194, 255, 0.35);
}
.bt-btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 22px 55px rgba(0, 194, 255, 0.4);
}
.bt-btn--outline {
background: transparent;
border-color: #00c2ff;
color: #e5f6ff;
}
.bt-btn--outline:hover {
background: rgba(0, 194, 255, 0.08);
}
.bt-btn--ghost {
background: transparent;
border-color: transparent;
color: #9ca3af;
}
.bt-btn--ghost:hover {
background: rgba(15, 23, 42, 0.75);
}
/* =========================================
GLOBAL DEMON ACCENTS (ANYWHERE IT'S LINKED)
========================================= */
/* Text links that go to The Demon (NOT buttons) */
a[href*="/the-demon/"]:not(.bt-btn),
a[href*="Demon-Book-Spirit-Saga"]:not(.bt-btn),
a[href*="the-demon-book"]:not(.bt-btn) {
color: #fecaca;
}
a[href*="/the-demon/"]:not(.bt-btn):hover,
a[href*="Demon-Book-Spirit-Saga"]:not(.bt-btn):hover,
a[href*="the-demon-book"]:not(.bt-btn):hover {
color: #f97373;
}
/* Buttons that point to The Demon – filled red */
.bt-btn[href*="/the-demon/"],
.bt-btn[href*="Demon-Book-Spirit-Saga"],
.bt-btn[href*="the-demon-book"] {
background: #f97373;
border-color: #f97373;
color: #111827;
box-shadow: 0 18px 45px rgba(248, 113, 113, 0.45);
}
.bt-btn[href*="/the-demon/"]:hover,
.bt-btn[href*="Demon-Book-Spirit-Saga"]:hover,
.bt-btn[href*="the-demon-book"]:hover {
/* keep text DARK on hover for contrast */
color: #111827;
transform: translateY(-1px);
box-shadow: 0 22px 55px rgba(248, 113, 113, 0.6);
}
/* Outline-style Demon buttons (like “Continue with The Demon”) */
.bt-btn.bt-btn--outline[href*="/the-demon/"],
.bt-btn.bt-btn--outline[href*="Demon-Book-Spirit-Saga"],
.bt-btn.bt-btn--outline[href*="the-demon-book"] {
background: transparent;
border-color: #f97373;
color: #fecaca;
}
.bt-btn.bt-btn--outline[href*="/the-demon/"]:hover,
.bt-btn.bt-btn--outline[href*="Demon-Book-Spirit-Saga"]:hover,
.bt-btn.bt-btn--outline[href*="the-demon-book"]:hover {
background: rgba(248, 113, 113, 0.12);
color: #fecaca;
}
/* =========================
2025-12 REFRESH: OBSERVER ACCENTS
========================= */
/* Text links that go to The Observer = white instead of teal */
a[href*="/the-observer"]:not(.bt-btn),
a[href*="the-observer-ebook"]:not(.bt-btn),
a[href*="the-observer-paperback"]:not(.bt-btn) {
color: #ffffff;
}
a[href*="/the-observer"]:not(.bt-btn):hover,
a[href*="the-observer-ebook"]:not(.bt-btn):hover,
a[href*="the-observer-paperback"]:not(.bt-btn):hover {
color: #e5e7eb;
text-decoration: underline;
}
/* Dedicated class for Observer-white buttons */
.bt-btn--observer {
background: #ffffff;
border-color: #ffffff;
color: #020617;
box-shadow: 0 20px 50px rgba(255, 255, 255, 0.16);
}
.bt-btn--observer:hover {
background: #f9fafb;
border-color: #f9fafb;
color: #020617;
transform: translateY(-1px);
box-shadow: 0 24px 60px rgba(255, 255, 255, 0.22);
}
/* Safety: any button that directly links to Observer products becomes white,
even if you forget to add bt-btn--observer */
.bt-btn[href*="/the-observer-ebook"],
.bt-btn[href*="/the-observer-paperback"],
.bt-btn[href*="/the-observer/"]:not(.bt-btn--outline) {
background: #ffffff;
border-color: #ffffff;
color: #020617;
box-shadow: 0 20px 50px rgba(255, 255, 255, 0.16);
}
.bt-btn[href*="/the-observer-ebook"]:hover,
.bt-btn[href*="/the-observer-paperback"]:hover,
.bt-btn[href*="/the-observer/"]:not(.bt-btn--outline):hover {
background: #f9fafb;
border-color: #f9fafb;
color: #020617;
transform: translateY(-1px);
box-shadow: 0 24px 60px rgba(255, 255, 255, 0.22);
}
/* ===== NEWSLETTER FORM ===== */
.bt-newsletter-shell {
max-width: 540px;
margin-inline: auto;
}
.bt-newsletter-shell form {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.bt-newsletter-shell input[type="email"],
.bt-newsletter-shell input[type="text"] {
flex: 1 1 220px;
min-width: 0;
padding: 0.75rem 0.9rem;
border-radius: 0.75rem;
border: 1px solid #4b5563;
background-color: #020617;
color: #f9fafb;
}
.bt-newsletter-shell input::placeholder {
color: #6b7280;
}
.bt-newsletter-shell .bt-btn {
flex: 0 0 auto;
}
@media (max-width: 540px) {
.bt-newsletter-shell form {
flex-direction: column;
align-items: stretch;
}
.bt-newsletter-shell .bt-btn {
width: 100%;
justify-content: center;
}
}
/* === HOME HERO – CLEAN LAYOUT OVERRIDE === */
.bt-home-hero-card {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3rem);
align-items: center;
}
/* Slightly limit text column so lines don't get too long */
.bt-home-hero__copy {
max-width: 640px;
}
/* Covers: flexible row that wraps nicely */
.bt-home-hero__covers {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
justify-content: center;
}
/* Keep each cover a nice, consistent size */
.bt-home-hero__cover {
max-width: 260px;
width: 100%;
}
/* Make sure images always show and scale */
.bt-home-hero__cover img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* Stack on mobile */
@media (max-width: 900px) {
.bt-home-hero-card {
grid-template-columns: minmax(0, 1fr);
}
.bt-home-hero__copy {
max-width: 100%;
}
}
/* ===== BOOK HERO BLOCKS (Observer/Demon pages later) ===== */
.bt-book-hero {
display: grid;
gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
.bt-book-hero {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
align-items: center;
}
}
.bt-book-hero__cover {
display: flex;
justify-content: center;
}
.bt-book-hero__cover img {
max-width: 260px;
width: 100%;
height: auto;
border-radius: 0.8rem;
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.85);
}
.bt-book-hero__meta {
font-size: 0.9rem;
color: #9ca3af;
margin-bottom: 0.7rem;
}
.bt-book-hero__buttons {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: 1.2rem;
margin-bottom: 0.5rem;
}
.bt-book-hero__format-note {
font-size: 0.8rem;
color: #9ca3af;
}
/* ===== REVIEWS GRID ===== */
.bt-review-grid {
display: grid;
gap: 1.5rem;
}
@media (min-width: 900px) {
.bt-review-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.bt-review-source {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #9ca3af;
}
.bt-review-quote {
font-style: italic;
margin-top: 0.75rem;
}
.bt-review-links {
margin-top: 0.85rem;
font-size: 0.85rem;
}
.bt-review-links a {
color: #a5e9ff;
text-decoration: underline;
}
/* ===== FOOTER ===== */
.bt-site-footer {
border-top: 1px solid #1f2937;
background: #020617;
padding: 1.5rem 1.5rem 2rem;
color: #9ca3af;
}
.bt-footer-inner {
max-width: 1120px;
margin: 0 auto;
font-size: 0.85rem;
}
/* ===== BOOK PAGE WRAPPER (Shared) ===== */
.bt-book-page {
/* just a hook if we want shared styles later */
}
.bt-book-page h2 {
margin-bottom: 0.8rem;
}
.bt-book-page h3 {
margin-top: 1.6rem;
margin-bottom: 0.4rem;
}
.bt-book-page ul {
padding-left: 1.1rem;
margin-bottom: 1rem;
}
/* ===== OBSERVER PAGE ACCENTS ===== */
.bt-book-page--observer .bt-card {
border-color: rgba(148, 190, 255, 0.6);
}
/* Regular text links = icy blue, but don't override button text */
.bt-book-page--observer a:not(.bt-btn) {
color: #a5e9ff;
}
.bt-book-page--observer a:not(.bt-btn):hover {
color: #00c2ff;
}
/* Make sure buttons on the Observer page keep strong contrast */
.bt-book-page--observer .bt-btn--primary {
color: #121212; /* dark text on teal */
}
.bt-book-page--observer .bt-btn--outline {
color: #e5f6ff;
}
/* ======================
DEMON PAGE ACCENTS
====================== */
.bt-book-page--demon .bt-card {
border-color: rgba(248, 113, 113, 0.65);
}
.bt-book-page--demon .bt-book-hero__cover img {
box-shadow: 0 26px 80px rgba(220, 38, 38, 0.9);
}
/* Default text links on The Demon page = red,
but don't touch buttons or links back to The Observer */
.bt-book-page--demon a:not(.bt-btn):not([href*="/the-observer/"]) {
color: #fecaca;
}
.bt-book-page--demon a:not(.bt-btn):not([href*="/the-observer/"]):hover {
color: #f97373;
}
/* Links on The Demon page that go to The Observer should be teal */
.bt-book-page--demon a[href*="/the-observer/"]:not(.bt-btn) {
color: #a5e9ff;
}
.bt-book-page--demon a[href*="/the-observer/"]:not(.bt-btn):hover {
color: #00c2ff;
}
/* Buttons on The Demon page = red by default */
.bt-book-page--demon .bt-btn--primary {
background: #f97373;
border-color: #f97373;
color: #111827;
box-shadow: 0 18px 45px rgba(248, 113, 113, 0.45);
}
.bt-book-page--demon .bt-btn--primary:hover {
color: #111827; /* keep contrast */
transform: translateY(-1px);
box-shadow: 0 22px 55px rgba(248, 113, 113, 0.6);
}
.bt-book-page--demon .bt-btn--outline {
background: transparent;
border-color: #f97373;
color: #fecaca;
}
.bt-book-page--demon .bt-btn--outline:hover {
background: rgba(248, 113, 113, 0.12);
color: #fecaca;
}
/* On The Demon page, any button that links BACK to The Observer should be teal */
.bt-book-page--demon .bt-btn[href*="/the-observer/"] {
background: transparent;
border-color: #00c2ff;
color: #e5f6ff;
box-shadow: none;
}
.bt-book-page--demon .bt-btn[href*="/the-observer/"]:hover {
background: rgba(0, 194, 255, 0.08);
color: #e5f6ff;
}
/* ======================
READING ORDER PAGE
====================== */
.bt-reading-order .bt-page-wrap > h1 {
margin-bottom: 0.75rem;
}
.bt-ro-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: ro-steps;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
/* Each step card */
.bt-ro-step {
position: relative;
}
.bt-ro-step-inner {
position: relative;
}
/* Label pill (Step 1 / Step 2 / Step 3) */
.bt-ro-step-label {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #9ca3af;
border: 1px solid #4b5563;
margin-bottom: 0.6rem;
}
/* Observer accent on Step 1 */
.bt-ro-step--observer .bt-ro-step-label {
border-color: #00c2ff;
color: #a5e9ff;
}
/* Demon accent on Step 2 */
.bt-ro-step--demon .bt-ro-step-label {
border-color: #f97373;
color: #fecaca;
}
/* Future / neutral accent */
.bt-ro-step--future .bt-ro-step-label {
border-color: #6b7280;
color: #e5e7eb;
}
@media (min-width: 900px) {
.bt-ro-list {
gap: 2rem;
}
}
/* ======================
NEWSLETTER PAGE
====================== */
.bt-newsletter-page h1 {
margin-bottom: 0.75rem;
}
.bt-newsletter-page .bt-newsletter-embed {
margin-top: 1.2rem;
padding: 1.25rem 1.1rem;
border-radius: 1rem;
border: 1px solid #1f2937;
background: rgba(15, 23, 42, 0.85);
}
/* Tighten typical Mailchimp form embeds a bit */
.bt-newsletter-embed form {
max-width: 520px;
}
.bt-newsletter-embed input[type="email"],
.bt-newsletter-embed input[type="text"] {
width: 100%;
margin-bottom: 0.75rem;
}
/* ======================
BLOG INDEX (/blog/)
====================== */
.bt-blog-page h1 {
margin-bottom: 0.75rem;
}
.bt-blog-grid {
display: grid;
gap: 1.6rem;
}
/* 1 column on mobile, 2 on tablet, 3 on larger screens */
@media (min-width: 640px) {
.bt-blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1080px) {
.bt-blog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.bt-blog-card {
display: flex;
flex-direction: column;
padding: 0; /* we’ll control padding per section */
overflow: hidden;
}
/* Featured image */
.bt-blog-card-thumb img {
width: 100%;
height: 210px;
object-fit: cover;
display: block;
}
/* Card body */
.bt-blog-card-body {
padding: 1.2rem 1.25rem 0.75rem;
}
.bt-blog-card-title {
margin-bottom: 0.3rem;
}
.bt-blog-card-title a {
color: #f9fafb;
}
.bt-blog-card-title a:hover {
color: #00c2ff;
}
.bt-blog-card-excerpt {
font-size: 0.95rem;
color: #d1d5db;
}
/* Footer with "Read the full post" */
.bt-blog-card-footer {
padding: 0 1.25rem 1.1rem;
margin-top: auto;
}
/* Pagination buttons inside .bt-book-hero__buttons should sit centered */
.bt-book-hero__buttons .page-numbers {
margin-right: 0.35rem;
}
/* ======================
SPIRIT TYPE TEST PAGE
====================== */
.bt-quiz-page h1 {
margin-bottom: 0.75rem;
}
.bt-quiz-shell {
max-width: 780px;
margin: 0 auto;
padding: 1.25rem 1.25rem 1.5rem;
border-radius: 1rem;
border: 1px solid #1f2937;
background: rgba(15, 23, 42, 0.9);
}
/* Generic quiz form styling to improve usability & contrast
without depending on the quiz's exact markup */
.bt-quiz-shell form {
width: 100%;
}
/* Labels & headings inside the quiz */
.bt-quiz-shell label,
.bt-quiz-shell legend {
font-weight: 600;
margin-bottom: 0.35rem;
display: block;
}
.bt-quiz-shell p {
margin-bottom: 0.75rem;
}
/* Inputs & selects */
.bt-quiz-shell input[type="text"],
.bt-quiz-shell input[type="email"],
.bt-quiz-shell input[type="number"],
.bt-quiz-shell select,
.bt-quiz-shell textarea {
width: 100%;
max-width: 100%;
padding: 0.5rem 0.6rem;
border-radius: 0.5rem;
border: 1px solid #374151;
background: #020617;
color: #e5e7eb;
font-size: 0.95rem;
margin-bottom: 0.75rem;
}
.bt-quiz-shell input[type="text"]:focus,
.bt-quiz-shell input[type="email"]:focus,
.bt-quiz-shell input[type="number"]:focus,
.bt-quiz-shell select:focus,
.bt-quiz-shell textarea:focus {
outline: 2px solid #00c2ff;
outline-offset: 1px;
border-color: #00c2ff;
}
/* Radio & checkbox groups: give them breathing room */
.bt-quiz-shell input[type="radio"],
.bt-quiz-shell input[type="checkbox"] {
margin-right: 0.4rem;
}
/* Space between answer options */
.bt-quiz-shell .bt-quiz-option,
.bt-quiz-shell .quiz-option,
.bt-quiz-shell .question-option {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin-bottom: 0.4rem;
}
/* Make quiz submit/next buttons look like site buttons */
.bt-quiz-shell input[type="submit"],
.bt-quiz-shell button[type="submit"],
.bt-quiz-shell button.bt-quiz-next,
.bt-quiz-shell button.bt-quiz-prev {
border-radius: 999px;
padding: 0.55rem 1.3rem;
border: 1px solid #00c2ff;
background: #00c2ff;
color: #111827;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
}
.bt-quiz-shell input[type="submit"]:hover,
.bt-quiz-shell button[type="submit"]:hover,
.bt-quiz-shell button.bt-quiz-next:hover,
.bt-quiz-shell button.bt-quiz-prev:hover {
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(0, 194, 255, 0.35);
}
/* Secondary / back buttons (if present) */
.bt-quiz-shell .bt-quiz-prev {
background: transparent;
color: #e5f6ff;
}
/* Make sure quiz text remains readable on small screens */
@media (max-width: 640px) {
.bt-quiz-shell {
padding: 1rem 1rem 1.25rem;
}
.bt-quiz-shell input[type="submit"],
.bt-quiz-shell button[type="submit"],
.bt-quiz-shell button.bt-quiz-next,
.bt-quiz-shell button.bt-quiz-prev {
width: 100%;
}
}
/* ======================
SPIRIT TYPE QUIZ (SQ)
====================== */
#sq-root {
--accent: #00C2FF;
--ink: #121212;
--muted: #9ca3af;
}
/* Layout */
#sq-root .sq-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 992px) {
#sq-root .sq-layout {
grid-template-columns: minmax(0, 1.6fr) 320px; /* more room for quiz, slightly narrower sidebar */
column-gap: 32px;
align-items: start;
}
}
/* Center the main card and keep it from becoming too wide */
#sq-root .sq-main .sq-card {
max-width: 1100px;
margin: 0 auto;
}
/* Cards (dark) */
#sq-root.sq-dark .sq-card {
background: #161616;
color: #eaeaea;
border-radius: 16px;
padding: 22px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
#sq-root.sq-dark h1,
#sq-root.sq-dark .sq-q legend {
color: #ffffff;
}
#sq-root .sq-title {
display: flex;
align-items: center;
gap: 14px;
}
#sq-root .sq-title img {
height: 36px;
width: auto;
}
#sq-root h1 {
margin: 0;
font-family: "Philosopher", Arial, sans-serif;
font-size: 28px;
line-height: 1.2;
}
#sq-root .sq-sub {
margin: 8px 0 0;
font-family: "Lora", Georgia, serif;
}
/* Narrow inner column so answers don't look stretched */
#sq-root .sq-inner {
max-width: 880px;
margin: 0 auto;
}
/* Questions */
#sq-root .sq-q {
border: 0;
margin: 16px 0 10px;
padding: 0;
}
#sq-root .sq-q legend {
font-weight: 700;
font-family: "Lora", Georgia, serif;
margin-bottom: 8px;
}
#sq-root .sq-opts {
display: grid;
gap: 8px;
}
/* Compact answer rows */
#sq-root .sq-opt {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
line-height: 1.35;
border: 1px solid #2a2a2a;
border-radius: 10px;
cursor: pointer;
background: #121212;
}
#sq-root .sq-opt:hover {
border-color: var(--accent);
background: #101010;
}
#sq-root .sq-opt input {
margin: 0;
width: 16px;
height: 16px;
}
#sq-root .sq-actions {
display: flex;
gap: 10px;
align-items: center;
margin: 16px 0 8px;
}
#sq-root .sq-btn {
display: inline-block;
border-radius: 10px;
padding: 12px 16px;
text-decoration: none;
font-weight: 700;
border: 1px solid transparent;
}
#sq-root .sq-primary {
background: var(--accent);
color: #111;
}
#sq-root .sq-secondary {
background: #1f2937;
color: #eaeaea;
border-color: #374151;
}
#sq-root .sq-error {
color: #fca5a5;
font-weight: 700;
margin-left: 8px;
}
/* Progress (right column) */
#sq-root .sq-side .sq-sticky {
position: sticky;
top: 16px;
}
#sq-root .sq-progress-wrap {
margin-bottom: 10px;
}
#sq-root .sq-bar-outer {
background: #2a2a2a;
border-radius: 999px;
height: 10px;
overflow: hidden;
}
#sq-root #sq-bar {
height: 10px;
width: 0%;
background: var(--accent);
transition: width .25s;
}
#sq-root .sq-progress-text {
margin-top: 8px;
font-size: 14px;
color: #eaeaea;
}
#sq-root .sq-muted {
color: var(--muted);
font-size: 14px;
}
/* Share UI */
#sq-root .sq-share-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 8px 0;
}
#sq-root .sq-linkbtn {
display: inline-block;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #2a2a2a;
text-decoration: none;
font-weight: 700;
color: #eaeaea;
background: #161616;
}
#sq-root .sq-linkbtn.fb {
background: #1877f2;
color: #fff;
border-color: #1877f2;
}
#sq-root .sq-linkbtn.copy {
background: #1f2937;
color: #eaeaea;
border-color: #374151;
}
/* Result badges (pills are themed by JS) */
#sq-root .sq-series-logo {
display: block;
max-width: 220px;
width: 60%;
height: auto;
margin: 0 auto 8px;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5));
}
/* Spirit Quiz sticky progress offset */
/* Spirit Quiz – make sidebar progress card non-sticky to avoid header overlap */
#sq-root .sq-side .sq-sticky {
position: static;
top: auto;
z-index: 1;
margin-top: 0; /* keep layout tight */
}
/* On smaller screens, don't use sticky */
@media (max-width: 900px) {
#sq-root .sq-side .sq-sticky {
position: static;
top: auto;
}
}
/* Make the quiz page a bit wider than standard content */
.bt-quiz-page .bt-page-wrap {
max-width: 1200px;
}
/* ======================
ABOUT BRIAN PAGE
====================== */
.bt-about-page .bt-page-wrap {
max-width: 1100px;
}
/* Two-column grid on desktop, stacked on mobile */
.bt-about-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: flex-start;
}
@media (min-width: 900px) {
.bt-about-grid {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
column-gap: 2.5rem;
}
}
.bt-about-header h1 {
margin-bottom: 0.75rem;
}
/* Main body text: comfortable line length */
.bt-about-body {
max-width: 720px;
margin: 0 auto;
line-height: 1.6;
font-size: 1rem;
}
/* Author photo + quick facts */
.bt-about-photo {
text-align: center;
}
.bt-about-img {
max-width: 320px;
width: 100%;
border-radius: 999px;
display: block;
margin: 0 auto 1rem;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
/* Quick Facts callout */
.bt-about-quickfacts {
margin-top: 1rem;
padding: 1rem 1.2rem;
border-radius: 0.9rem;
border: 1px solid rgba(148, 163, 184, 0.5);
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
text-align: left;
}
.bt-about-quickfacts__title {
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 0.4rem;
color: #e5e7eb;
}
.bt-about-quickfacts__list {
list-style: disc;
padding-left: 1.2rem;
margin: 0;
font-size: 0.95rem;
color: #cbd5f5;
}
.bt-about-quickfacts__list li + li {
margin-top: 0.3rem;
}
/* Highlight card (accolades + badge) */
.bt-about-highlight {
display: block; /* no flex */
padding: 1.25rem 1.5rem;
border-radius: 0.9rem;
border: 1px solid rgba(148, 163, 184, 0.45);
background: rgba(2, 6, 23, 0.9);
margin-bottom: 1.5rem;
}
.bt-about-highlight__text p {
margin: 0 0 0.75rem;
}
/* PenCraft badge inside the highlight */
.bt-about-highlight__badge {
text-align: center;
}
.bt-about-highlight__badge img {
max-width: 180px; /* crisp, not overpowering */
width: 100%;
height: auto;
display: inline-block;
}
/* Divider before press kit */
.bt-about-divider {
border: 0;
border-top: 1px solid rgba(148, 163, 184, 0.3);
margin: 1.75rem 0 1.25rem;
}
/* Press kit list */
.bt-presskit-list {
margin: 0 0 1rem;
padding-left: 1.2rem;
list-style: disc;
}
.bt-presskit-list li + li {
margin-top: 0.4rem;
}
/* Press kit image grid */
.bt-presskit-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 1rem;
}
.bt-presskit-grid figure {
flex: 1 1 200px;
max-width: 230px;
margin: 0;
text-align: center;
}
.bt-presskit-grid img {
width: 100%;
height: auto;
border-radius: 0.75rem;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.bt-presskit-grid figcaption {
margin-top: 0.4rem;
font-size: 0.9rem;
color: #cbd5f5;
}
/* Make sure generic body-image rules don't fight the grid */
.bt-about-body img {
max-width: 100%;
}
/* CTA block under the bio */
.bt-about-cta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
.bt-about-cta .bt-btn {
font-size: 0.95rem;
}
@media (max-width: 640px) {
.bt-about-cta {
flex-direction: column;
align-items: stretch;
}
.bt-about-cta .bt-btn {
width: 100%;
justify-content: center;
}
.bt-about-highlight {
flex-direction: column;
align-items: flex-start;
}
.bt-presskit-grid {
justify-content: flex-start;
}
}
/* ======================
REVIEWS PAGE
====================== */
.bt-reviews-page .bt-page-wrap {
max-width: 1100px;
}
/* Hero */
.bt-reviews-hero {
text-align: left;
max-width: 820px;
margin: 0 auto 2rem;
}
.bt-reviews-hero h1 {
margin-bottom: 0.5rem;
}
.bt-reviews-intro {
margin: 0 0 1.25rem;
}
.bt-reviews-cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
@media (max-width: 640px) {
.bt-reviews-cta-row {
flex-direction: column;
}
.bt-reviews-cta-row .bt-btn {
width: 100%;
justify-content: center;
}
}
/* Awards / badges callout */
.bt-reviews-award {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
gap: 1.75rem;
align-items: center;
margin: 2rem 0;
padding: 1.25rem 1.5rem;
border-radius: 0.9rem;
border: 1px solid rgba(148, 163, 184, 0.45);
background: rgba(2, 6, 23, 0.9);
}
.bt-reviews-award__badge {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-start;
justify-content: flex-start;
}
.bt-award-badge {
text-align: center;
max-width: 220px;
}
.bt-award-badge img {
max-height: 110px;
width: auto;
display: block;
margin: 0 auto 6px;
}
.bt-award-badge figcaption {
font-size: 0.85rem;
color: #e5e7eb;
}
.bt-award-badge--text {
text-align: left;
}
.bt-award-pill {
display: inline-block;
border-radius: 999px;
border: 1px solid #00c2ff;
padding: 3px 10px;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
.bt-reviews-award__eyebrow {
margin: 0 0 0.25rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.8rem;
color: #a5b4fc;
}
.bt-reviews-award h2 {
margin: 0 0 0.35rem;
}
@media (max-width: 768px) {
.bt-reviews-award {
grid-template-columns: 1fr;
text-align: left;
}
.bt-reviews-award__badge {
justify-content: center;
}
}
/* Sections */
.bt-reviews-section {
margin: 2.25rem 0;
}
.bt-reviews-section__header {
max-width: 760px;
margin-bottom: 1.25rem;
}
.bt-reviews-section__header--compact {
max-width: 600px;
}
.bt-kicker {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
margin: 0 0 0.25rem;
}
/* Editorial review cards */
.bt-reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.bt-review-card {
padding: 1rem 1.1rem;
border-radius: 0.9rem;
border: 1px solid rgba(55, 65, 81, 0.8);
background: radial-gradient(circle at top left,
rgba(15, 23, 42, 0.95),
rgba(15, 23, 42, 0.85)
);
}
.bt-review-card__source {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #a5b4fc;
margin-bottom: 0.35rem;
}
.bt-review-card__quote {
font-size: 0.95rem;
margin: 0 0 0.75rem;
}
.bt-review-card__quote q {
quotes: "“" "”" "‘" "’";
}
.bt-review-card__link {
font-size: 0.9rem;
text-decoration: underline;
color: #00c2ff;
}
/* Reader review panels */
.bt-reader-panels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.bt-reader-panel {
padding: 1rem 1.1rem;
border-radius: 0.9rem;
border: 1px solid rgba(55, 65, 81, 0.8);
background: rgba(15, 23, 42, 0.95);
}
.bt-reader-panel h3 {
margin-top: 0;
margin-bottom: 0.4rem;
}
.bt-reader-panel__blurb {
font-size: 0.95rem;
margin: 0 0 0.8rem;
}
.bt-reader-panel__links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bt-link-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.8rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.6);
font-size: 0.85rem;
text-decoration: none;
color: #e5e7eb;
}
.bt-link-pill:hover {
border-color: #00c2ff;
color: #00c2ff;
}
/* Bottom CTA */
.bt-reviews-bottom-cta {
margin: 2.75rem 0 0;
text-align: center;
}
.bt-reviews-bottom-cta p {
margin: 0 0 0.75rem;
}
/* ======================
WOO PAGE – GLOBAL
====================== */
.bt-woo-page .bt-page-wrap {
max-width: 1100px;
}
/* Generic simple header used on cart / checkout / account */
.bt-woo-simple-header {
max-width: 720px;
margin: 0 auto 1.75rem;
}
.bt-woo-simple-header h1 {
margin-bottom: 0.35rem;
}
.bt-woo-simple-header p {
margin: 0;
}
/* ======================
SHOP (archive-product)
====================== */
.bt-woo-hero {
text-align: left;
max-width: 820px;
margin: 0 auto 2rem;
}
.bt-woo-title {
margin-bottom: 0.4rem;
}
.bt-woo-subtitle {
margin: 0;
}
.bt-woo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.bt-woo-card {
display: flex;
flex-direction: column;
border-radius: 0.9rem;
border: 1px solid rgba(55, 65, 81, 0.9);
background: radial-gradient(circle at top left,
rgba(15, 23, 42, 0.96),
rgba(15, 23, 42, 0.9)
);
overflow: hidden;
}
.bt-woo-card__thumb img {
width: 100%;
height: auto;
display: block;
}
.bt-woo-card__body {
padding: 0.9rem 1rem 1rem;
}
.bt-woo-card__title {
margin: 0 0 0.3rem;
font-size: 1.05rem;
}
.bt-woo-card__title a {
text-decoration: none;
color: #f9fafb;
}
.bt-woo-card__excerpt {
font-size: 0.9rem;
color: #cbd5f5;
margin: 0 0 0.65rem;
}
.bt-woo-card__meta {
font-weight: 600;
margin-bottom: 0.65rem;
}
/* Reuse Woo’s button classes but keep your brand */
.bt-woo-card__actions .button {
width: 100%;
}
/* ======================
SINGLE PRODUCT
====================== */
.bt-woo-product-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 2rem;
align-items: flex-start;
margin-bottom: 2rem;
}
.bt-woo-product__media .woocommerce-product-gallery__wrapper img {
border-radius: 0.9rem;
box-shadow: 0 18px 40px rgba(0,0,0,0.7);
}
.bt-woo-product__summary {
max-width: 560px;
}
.bt-woo-product__summary .product_title {
margin-top: 0;
}
.bt-woo-product__summary .price {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.bt-woo-product__summary .woocommerce-product-details__short-description {
margin-bottom: 0.9rem;
}
/* Trust list under add-to-cart */
.bt-woo-trust {
margin-top: 1rem;
padding: 0.75rem 0.85rem;
border-radius: 0.75rem;
border: 1px solid rgba(148, 163, 184, 0.5);
background: rgba(15, 23, 42, 0.9);
font-size: 0.9rem;
}
.bt-woo-trust ul {
margin: 0;
padding-left: 1.2rem;
}
.bt-woo-trust li + li {
margin-top: 0.25rem;
}
.bt-woo-product__extras {
margin-top: 1rem;
}
/* Layout responsiveness */
@media (max-width: 900px) {
.bt-woo-product-grid {
grid-template-columns: 1fr;
}
}
/* ======================
CART / CHECKOUT / ACCOUNT TWEAKS
====================== */
.woocommerce-cart .bt-woo-page .bt-page-wrap,
.woocommerce-checkout .bt-woo-page .bt-page-wrap,
.woocommerce-account .bt-woo-page .bt-page-wrap {
max-width: 900px;
}
/* Tables: make them a bit cleaner on dark bg */
.woocommerce table.shop_table {
background: rgba(15, 23, 42, 0.95);
border-radius: 0.75rem;
border: 1px solid rgba(55,65,81,0.9);
color: #e5e7eb;
}
.woocommerce table.shop_table th {
background: rgba(15, 23, 42, 0.98);
}
/* Form fields */
.woocommerce-checkout .input-text,
.woocommerce-account .input-text {
background: #020617;
border-radius: 0.35rem;
border: 1px solid rgba(75,85,99,0.9);
color: #e5e7eb;
}
/* Buttons – unify styling */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
border-radius: 999px;
border: none;
padding: 0.55rem 1.4rem;
font-weight: 600;
background: #00c2ff;
color: #111827;
text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background: #38d3ff;
color: #020617;
}
/* Shop toolbar (result count + sort dropdown) */
.bt-woo-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0 0 1.25rem;
}
/* Result count */
.bt-woo-toolbar .woocommerce-result-count {
margin: 0;
font-size: 0.9rem;
color: #9ca3af;
}
/* Ordering dropdown */
.bt-woo-toolbar .woocommerce-ordering {
margin: 0 0 0 auto;
}
.bt-woo-toolbar .woocommerce-ordering select {
background: #020617;
color: #e5e7eb;
border-radius: 999px;
padding: 0.35rem 0.9rem;
border: 1px solid rgba(75, 85, 99, 0.9);
font-size: 0.9rem;
}
/* Breadcrumbs – make them subtle and not shouty */
.woocommerce-breadcrumb {
font-size: 0.85rem;
color: #9ca3af;
margin-bottom: 0.75rem;
}
.woocommerce-breadcrumb a {
color: #9ca3af;
}
.woocommerce-breadcrumb a:hover {
color: #00c2ff;
}
/* Small tweak so the grid doesn’t feel cramped under the toolbar */
.bt-woo-grid {
margin-top: 0.5rem;
}
/* ======================
SINGLE PRODUCT – VARIATIONS / FORMAT DROPDOWN
====================== */
.bt-woo-product__summary .variations_form table {
margin-bottom: 0.9rem;
}
.bt-woo-product__summary .variations label {
font-weight: 600;
margin-right: 0.5rem;
}
.bt-woo-product__summary .variations select {
background: #020617;
color: #e5e7eb;
border-radius: 999px;
border: 1px solid #00c2ff;
padding: 0.35rem 0.9rem;
min-width: 220px;
cursor: pointer;
/* Make it look like a real dropdown */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 10px 10px;
padding-right: 1.8rem;
}
.bt-woo-product__summary .variations select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.5);
}
/* Product meta under price/add-to-cart */
.bt-woo-product__summary .product_meta {
font-size: 0.85rem;
color: #9ca3af;
margin-top: 0.75rem;
}
.bt-woo-product__summary .product_meta a {
color: #e5e7eb;
}
.bt-woo-product__summary .product_meta a:hover {
color: #00c2ff;
}
/* ======================
SINGLE PRODUCT – AWARDS BLOCK
====================== */
.bt-product-awards {
margin: 1.75rem 0 1.5rem;
}
.bt-product-awards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
align-items: center;
margin-bottom: 0.75rem;
}
.bt-product-awards img {
max-width: 180px;
height: auto;
display: block;
}
.bt-award-card p {
margin: 0.4rem 0 0;
font-size: 0.95rem;
}
.bt-award-note {
margin: 0.25rem 0 0;
font-size: 0.95rem;
}
/* ======================
SINGLE PRODUCT – IMAGE SIZE
====================== */
/* Let the gallery use more horizontal space */
.single-product .woocommerce-product-gallery {
max-width: 520px; /* bump this up/down to taste */
width: 100%;
}
/* Make the image actually fill that space */
.single-product .woocommerce-product-gallery img {
width: 100%;
height: auto;
display: block;
border-radius: 1.25rem;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
/* On narrow screens, just let it be full width */
@media (max-width: 900px) {
.single-product .woocommerce-product-gallery {
max-width: 100%;
margin: 0 0 1.5rem;
}
}
/* ======================
SINGLE PRODUCT – FORMAT DROPDOWN (FORCE DARK)
====================== */
.bt-woo-product__summary .variations label {
font-weight: 600;
margin-right: 0.5rem;
}
/* Force dark pill with visible arrow */
.bt-woo-product__summary .variations select,
.single-product .variations_form select {
background: #020617 !important;
color: #e5e7eb !important;
border-radius: 999px;
border: 1px solid #00c2ff;
padding: 0.35rem 0.9rem;
min-width: 220px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 10px 10px;
padding-right: 1.8rem;
}
.single-product .variations_form select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.5);
}
/* ======================
SINGLE PRODUCT – FORCE LARGER COVER IMAGE
====================== */
/* Widen the image column and tighten the gap */
.single-product div.product {
display: grid;
grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
gap: 3rem;
align-items: flex-start;
}
/* The gallery wrapper itself */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .bt-woo-product__gallery {
max-width: 420px !important; /* bump to 460–480px if you want even bigger */
width: 100% !important;
}
/* Make the actual image fill its container */
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product .woocommerce-product-gallery img {
width: 100% !important;
height: auto !important;
display: block;
border-radius: 1.25rem;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
/* Mobile: fall back to stacked layout */
@media (max-width: 900px) {
.single-product div.product {
display: block;
}
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .bt-woo-product__gallery {
max-width: 100% !important;
margin: 0 0 1.5rem;
}
}
/* ======================
SINGLE PRODUCT – WOO TABS
====================== */
/* Wrapper spacing */
.single-product .woocommerce-tabs {
margin-top: 2.5rem;
}
/* Turn the tab list into a horizontal pill menu */
.single-product .woocommerce-tabs ul.tabs {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
/* Kill Woo's default triangle/lines if they exist */
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after {
content: none !important;
}
/* Each tab "pill" */
.single-product .woocommerce-tabs ul.tabs li {
margin: 0;
padding: 0;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
}
/* Tab links */
.single-product .woocommerce-tabs ul.tabs li a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.9rem;
font-size: 0.95rem;
text-decoration: none;
color: #e5e7eb;
}
/* Hover state */
.single-product .woocommerce-tabs ul.tabs li a:hover {
color: #00c2ff;
}
/* Active tab – filled teal pill */
.single-product .woocommerce-tabs ul.tabs li.active,
.single-product .woocommerce-tabs ul.tabs li.active a {
border-color: #00c2ff;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
background: #00c2ff;
color: #020617;
font-weight: 600;
border-radius: 999px;
}
/* Panel spacing */
.single-product .woocommerce-Tabs-panel {
margin-top: 0.5rem;
}
/* ======================
CHECKOUT PAGE
====================== */
/* Page intro */
.bt-checkout-hero {
margin-bottom: 2.5rem;
}
.bt-checkout-hero h1 {
margin-bottom: 0.4rem;
}
.bt-checkout-hero p {
margin: 0 0 0.75rem;
}
.bt-checkout-trust {
margin: 0;
padding-left: 1.2rem;
font-size: 0.95rem;
color: #e5e7eb;
}
/* Layout: form left, order summary right */
.woocommerce-checkout .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 2rem;
align-items: flex-start;
}
@media (max-width: 900px) {
.woocommerce-checkout .woocommerce {
display: block;
}
}
/* Billing / shipping cards */
.woocommerce-checkout form.checkout #customer_details .col-1,
.woocommerce-checkout form.checkout #customer_details .col-2 {
background: rgba(15, 23, 42, 0.95);
border-radius: 1rem;
padding: 1.5rem 1.75rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(148, 163, 184, 0.4);
}
/* Labels + inputs */
.woocommerce form .form-row label {
font-size: 0.9rem;
margin-bottom: 0.2rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
background: #020617;
color: #e5e7eb;
border-radius: 0.7rem;
border: 1px solid rgba(148, 163, 184, 0.7);
padding: 0.5rem 0.75rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
outline: none;
border-color: #00c2ff;
box-shadow: 0 0 0 1px rgba(0, 194, 255, 0.6);
}
/* Order review card */
.woocommerce-checkout #order_review {
background: rgba(15, 23, 42, 0.98);
border-radius: 1rem;
padding: 1.5rem 1.75rem;
border: 1px solid rgba(148, 163, 184, 0.4);
}
/* Order table */
.woocommerce-checkout #order_review table.shop_table {
border-radius: 0.75rem;
overflow: hidden;
background: #020617;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
border-color: rgba(31, 41, 55, 0.9);
}
/* Payment box */
.woocommerce-checkout #payment {
background: #020617;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
border: 1px solid rgba(31, 41, 55, 0.9);
}
/* Place order button */
.woocommerce-checkout #place_order {
width: 100%;
border-radius: 999px;
padding: 0.85rem 1rem;
background: #00c2ff;
color: #020617;
font-weight: 700;
border: none;
}
.woocommerce-checkout #place_order:hover {
background: #35d5ff;
}
/* ======================
CART PAGE
====================== */
.woocommerce-cart .woocommerce {
max-width: 1000px;
margin: 0 auto;
}
/* Cart table as a card */
.woocommerce-cart table.shop_table {
background: rgba(15, 23, 42, 0.98);
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(55, 65, 81, 0.9);
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
border-color: rgba(31, 41, 55, 0.9);
}
/* Coupon row */
.woocommerce-cart .coupon .input-text {
background: #020617;
color: #e5e7eb;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
padding: 0.45rem 0.85rem;
}
.woocommerce-cart .coupon .button {
border-radius: 999px;
}
/* Cart totals box */
.woocommerce-cart .cart-collaterals .cart_totals {
background: rgba(15, 23, 42, 0.98);
border-radius: 1rem;
padding: 1.4rem 1.6rem;
border: 1px solid rgba(148, 163, 184, 0.45);
}
/* Proceed to checkout button */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
border-radius: 999px;
background: #00c2ff;
color: #020617;
font-weight: 700;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
background: #35d5ff;
}
/* ======================
COOKIE BANNER
====================== */
.bt-cookie-banner {
position: fixed;
left: 50%;
bottom: 1rem;
transform: translateX(-50%);
z-index: 9999;
width: calc(100% - 2rem);
max-width: 640px;
background: rgba(15, 23, 42, 0.98);
border-radius: 0.9rem;
border: 1px solid rgba(148, 163, 184, 0.7);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75);
color: #e5e7eb;
font-size: 0.9rem;
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.bt-cookie-banner-inner {
padding: 0.9rem 1rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
}
.bt-cookie-banner-text {
margin: 0;
flex: 1 1 auto;
}
.bt-cookie-banner-text a {
color: #00c2ff;
text-decoration: underline;
}
.bt-cookie-banner-actions {
display: flex;
flex-direction: column;
gap: 0.35rem;
flex: 0 0 auto;
}
/* Reuse button styles but ensure compact */
.bt-cookie-banner-actions .bt-btn {
padding: 0.4rem 0.9rem;
font-size: 0.9rem;
white-space: nowrap;
}
/* Smaller screens: stack vertically */
@media (max-width: 640px) {
.bt-cookie-banner-inner {
flex-direction: column;
align-items: stretch;
}
.bt-cookie-banner-actions {
flex-direction: row;
justify-content: flex-end;
}
.bt-cookie-banner {
bottom: 0.75rem;
}
}
/* HOME HERO – widen wrapper on desktop only */
@media (min-width: 980px) {
.home .bt-home-hero .bt-page-wrap {
max-width: 1120px;
}
}
/* HOME HERO – book cover cards + accent borders */
.bt-home-hero__cover {
background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.2), #020617 60%);
border-radius: 1.25rem;
border: 1px solid rgba(148, 163, 184, 0.6);
padding: 1rem 1.2rem 1.1rem;
text-align: center;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
}
.bt-home-hero__cover img {
max-width: 210px;
width: 100%;
height: auto;
display: block;
margin-inline: auto;
border-radius: 0.8rem;
}
.bt-home-hero__cover--observer {
border-color: #00c2ff;
}
.bt-home-hero__cover--demon {
border-color: #f97373;
}
/* Home: Social feed section */
.bt-home-social-feed .bt-home-social-feed__header {
text-align: left;
max-width: 640px;
margin: 0 auto 1.5rem;
}
.bt-home-social-feed__header h2 {
margin-bottom: 0.35rem;
}
.bt-home-social-feed__header p {
margin: 0;
}
.bt-home-social-feed__widget {
margin-top: 1rem;
}
/* Optional: tweak padding on smaller screens if needed */
@media (max-width: 768px) {
.bt-home-social-feed .bt-card {
padding: 1.5rem 1.25rem;
}
}
/* Hero book visuals */
.bt-home-hero__art {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.bt-hero-book img {
max-width: 260px;
height: auto;
display: block;
}
.bt-hero-book {
text-align: center;
}
.bt-hero-book--offset {
transform: translateY(0.5rem);
}
@media (min-width: 768px) {
.bt-home-hero__art {
align-items: flex-end;
}
}
/* Spirit types block */
.bt-home-spirits__art {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.75rem;
}
.bt-spirit-list {
list-style: none;
margin: 0 0 0.75rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.bt-spirit-pill {
border-radius: 999px;
padding: 0.35rem 0.9rem;
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.35);
display: inline-block;
}
/* Aura-ish color hints */
.bt-spirit-pill--observer {
box-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}
.bt-spirit-pill--demon {
box-shadow: 0 0 16px rgba(255, 64, 64, 0.5);
}
.bt-spirit-pill--trickster {
box-shadow: 0 0 16px rgba(0, 194, 255, 0.6);
}
.bt-spirit-pill--guide {
box-shadow: 0 0 16px rgba(255, 159, 59, 0.6);
}
.bt-spirits-quad__note {
font-size: 0.9rem;
opacity: 0.85;
}
/* === HERO LAYOUT TWEAKS === */
/* Make sure the hero grid lines both columns up nicely */
.bt-home-hero__card .bt-home-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 2.5rem;
align-items: center; /* vertical centering between text and books */
}
/* Keep everything inside the rounded card */
.bt-home-hero__card {
overflow: hidden;
}
/* Right-side book stack */
.bt-home-hero__art.bt-hero-books {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center; /* vertically center the stack */
gap: 1.25rem;
}
/* Book cover sizing */
.bt-hero-book img {
max-width: 220px; /* slightly smaller so they don’t dominate */
height: auto;
display: block;
}
/* Caption spacing */
.bt-hero-book figcaption {
margin-top: 0.5rem;
}
/* Small offset for the second book (subtle, not huge) */
.bt-hero-book--offset {
transform: translateY(6px);
}
/* Mobile: stack text then books, centered */
@media (max-width: 768px) {
.bt-home-hero__card .bt-home-hero__grid {
grid-template-columns: 1fr;
}
.bt-home-hero__art.bt-hero-books {
align-items: center;
margin-top: 1.5rem;
}
}
/* On wider screens, you can put the first two CTAs side-by-side if you want */
@media (min-width: 768px) {
.bt-btn-row--hero-main {
flex-direction: row;
}
}
/* Teal outline buttons under hero book covers */
.bt-btn.bt-btn--teal-outline {
border: 1px solid #00C2FF;
color: #00C2FF;
background: transparent;
border-radius: 999px;
padding: 0.55rem 1.4rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.bt-btn.bt-btn--teal-outline:hover {
background: rgba(0, 194, 255, 0.12);
}
/* === HERO ALIGNMENT FIX === */
/* Let the text sit toward the top of the card, not centered */
.bt-home-hero__card .bt-home-hero__grid {
align-items: flex-start; /* or 'start' if you prefer */
}
/* Make sure the left column specifically hugs the top */
.bt-home-hero__copy {
align-self: flex-start;
}
/* Book stack: line up with the top as well instead of centering */
.bt-home-hero__art.bt-hero-books {
justify-content: flex-start;
}
/*
Theme Name: Brian Thompson Writes – Custom
Theme URI: http...
Author: ...
Description: Custom child theme for Brian Thompson Writes
Version: 1.0
*/
/* =========================
GLOBAL RESET / BASE
========================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #050810;
color: #f9fafb;
}
/* Utility container */
.bt-site-main {
width: 100%;
}
.bt-page-wrap {
max-width: 960px;
margin: 0 auto;
padding: 1.75rem 1.25rem;
}
/* Global section wrapper */
.bt-section {
padding: 2.5rem 0;
}
.bt-section--dark {
background: radial-gradient(circle at top left, #15192a 0%, #050810 55%, #020308 100%);
}
.bt-section--bordered .bt-page-wrap > .bt-card {
border-radius: 1.75rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Cards */
.bt-card {
background: radial-gradient(circle at top left, rgba(31, 41, 55, 0.7) 0%, rgba(3, 7, 18, 0.9) 55%);
border-radius: 1.75rem;
border: 1px solid rgba(148, 163, 184, 0.3);
padding: clamp(1.75rem, 3vw, 2.5rem);
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.85);
}
.bt-card--split {
padding: clamp(2rem, 3vw, 2.75rem);
}
/* Headings */
h1,
h2,
h3,
h4 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-weight: 600;
letter-spacing: 0.04em;
}
h1 {
font-size: clamp(2rem, 3.5vw, 2.85rem);
line-height: 1.12;
}
h2 {
font-size: clamp(1.6rem, 2.8vw, 2.1rem);
line-height: 1.18;
}
h3 {
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}
/* Body text */
p {
margin: 0 0 0.9rem;
line-height: 1.7;
font-size: 0.98rem;
color: #e5e7eb;
}
/* Links */
a {
color: #60a5fa;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Kicker labels */
.bt-kicker {
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 0.78rem;
color: #9ca3af;
}
/* Buttons */
.bt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.7rem;
border-radius: 999px;
border: 1px solid transparent;
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition:
background-color 150ms ease,
color 150ms ease,
border-color 150ms ease,
box-shadow 150ms ease,
transform 100ms ease;
white-space: nowrap;
}
/* Primary: bright cyan pill */
.bt-btn--primary {
background: radial-gradient(circle at top left, #22d3ee, #06b6d4);
color: #020617;
box-shadow: 0 20px 50px rgba(34, 211, 238, 0.35);
}
.bt-btn--primary:hover {
background: radial-gradient(circle at top left, #67e8f9, #22d3ee);
transform: translateY(-1px);
}
/* Outline: dark navy with ember glow */
.bt-btn--outline {
background: transparent;
color: #f9fafb;
border-color: rgba(248, 250, 252, 0.65);
box-shadow: 0 0 20px rgba(248, 113, 113, 0.25);
}
.bt-btn--outline:hover {
background: rgba(15, 23, 42, 0.85);
}
/* Ghost: transparent pill with hairline border */
.bt-btn--ghost {
background: transparent;
color: #e5e7eb;
border-color: rgba(148, 163, 184, 0.65);
}
.bt-btn--ghost:hover {
border-color: #e5e7eb;
background: rgba(15, 23, 42, 0.85);
}
/* Button row helper */
.bt-btn-row {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: center;
}
/* Grids */
.bt-grid {
display: grid;
gap: 1.75rem;
}
.bt-grid--2col {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
.bt-grid--2col {
grid-template-columns: minmax(0, 1fr);
}
}
/* =========================
HEADER / NAVIGATION
========================= */
.site-header {
background: radial-gradient(circle at top left, #141c34 0%, #020617 55%, #000000 100%);
border-bottom: 1px solid rgba(15, 23, 42, 0.95);
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.85);
}
.site-header .bt-page-wrap {
max-width: 1120px;
margin: 0 auto;
padding: 0.55rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* Header right: nav + primary CTA */
.bt-header-right {
display: flex;
align-items: center;
gap: 1rem;
}
/* Mobile: let nav wrap under the CTA */
@media (max-width: 900px) {
.site-header .bt-page-wrap {
flex-wrap: wrap;
align-items: flex-start;
}
.bt-header-right {
width: 100%;
order: 3;
flex-direction: column;
align-items: stretch;
margin-left: 0;
}
.bt-nav {
flex: 1 1 100%;
justify-content: flex-end;
}
.bt-nav-cta {
order: 1;
}
}
/* Brand area (logo + tagline) */
.bt-header-brand {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
}
.bt-header-brand img {
max-height: 48px;
width: auto;
height: auto;
}
.bt-header-tagline {
font-size: 0.78rem;
color: #9ca3af;
max-width: 260px;
line-height: 1.4;
}
/* Nav */
.bt-nav {
display: flex;
align-items: center;
gap: 1.25rem;
}
.bt-nav-list {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.9rem;
}
.bt-nav-list li {
position: relative;
}
.bt-nav-list li a {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.75rem;
border-radius: 999px;
color: #e5e7eb;
text-decoration: none;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.75rem;
}
.bt-nav-list li.current-menu-item > a,
.bt-nav-list li.current_page_item > a,
.bt-nav-list li a:hover {
background: rgba(15, 23, 42, 0.85);
color: #fefce8;
}
/* Primary CTA bubble in header */
.bt-nav-cta .bt-btn--primary {
font-size: 0.78rem;
padding-inline: 1.4rem;
}
/* Mobile nav toggle (if used later) */
.bt-nav-toggle {
display: none;
}
/* =========================
HOME HERO – MAIN CARD
========================= */
/* Widen wrapper on desktop only */
@media (min-width: 980px) {
.home .bt-home-hero .bt-page-wrap {
max-width: 1120px;
}
}
/* Card container */
.bt-home-hero__card {
overflow: hidden;
}
/* Two-column grid: copy left, books right */
.bt-home-hero__card .bt-home-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 2.5rem;
align-items: flex-start; /* top-align both columns */
}
/* Text column */
.bt-home-hero__copy {
max-width: 640px;
align-self: flex-start;
}
/* Right-side book stack */
.bt-home-hero__art.bt-hero-books {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
gap: 1.25rem;
}
/* Individual book figure */
.bt-hero-book {
text-align: center;
}
.bt-hero-book img {
max-width: 220px;
width: 100%;
height: auto;
display: block;
}
.bt-hero-book figcaption {
margin-top: 0.5rem;
}
/* Small offset for the second book */
.bt-hero-book--offset {
transform: translateY(6px);
}
/* Mobile: stack columns, center books */
@media (max-width: 768px) {
.bt-home-hero__card .bt-home-hero__grid {
grid-template-columns: 1fr;
}
.bt-home-hero__art.bt-hero-books {
align-items: center;
margin-top: 1.5rem;
}
}
/* Teal outline buttons under hero book covers */
.bt-btn.bt-btn--teal-outline {
border: 1px solid #00C2FF;
color: #00C2FF;
background: transparent;
border-radius: 999px;
padding: 0.55rem 1.4rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.bt-btn.bt-btn--teal-outline:hover {
background: rgba(0, 194, 255, 0.12);
}
/* ===== BOOK HERO BLOCKS (Observer/Demon pages later) ===== */
.bt-book-hero {
display: grid;
gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
.bt-book-hero {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
}
}
.bt-book-hero__meta {
font-size: 0.9rem;
color: #9ca3af;
margin-bottom: 0.7rem;
}
.bt-book-hero__buttons {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: 1.2rem;
}
/* ... (ALL YOUR EXISTING STYLE RULES CONTINUE UNCHANGED) ... */
/* Spirit types – pills */
.bt-home-spirits__art {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.75rem;
}
.bt-spirit-list {
list-style: none;
margin: 0 0 0.75rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.bt-spirit-pill {
border-radius: 999px;
padding: 0.35rem 0.9rem;
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.35);
display: inline-block;
}
.bt-spirit-pill--observer {
box-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}
.bt-spirit-pill--demon {
box-shadow: 0 0 16px rgba(255, 64, 64, 0.5);
}
.bt-spirit-pill--trickster {
box-shadow: 0 0 16px rgba(0, 194, 255, 0.6);
}
.bt-spirit-pill--guide {
box-shadow: 0 0 16px rgba(255, 159, 59, 0.6);
}
.bt-spirits-quad__note {
font-size: 0.9rem;
opacity: 0.85;
}
/* =========================
HOME HERO – STACKED LAYOUT
========================= */
.bt-home-hero__card {
overflow: hidden;
}
/* Inner wrapper stacks content vertically */
.bt-home-hero__inner {
display: flex;
flex-direction: column;
gap: 2.25rem;
}
/* Copy block width */
.bt-home-hero__copy {
max-width: 640px;
}
/* Covers stack under the text */
.bt-home-hero__covers {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
/* Book figures in hero */
.bt-hero-book {
text-align: center;
}
.bt-hero-book img {
max-width: 260px;
width: 100%;
height: auto;
display: block;
margin-inline: auto;
}
.bt-hero-book figcaption {
margin-top: 0.5rem;
}
/* Slight offset for second book so it's not robotically aligned */
.bt-hero-book--offset {
transform: translateY(4px);
}
/* Learn-more buttons under covers (teal outline) */
.bt-btn.bt-btn--teal-outline {
border: 1px solid #00C2FF;
color: #00C2FF;
background: transparent;
border-radius: 999px;
padding: 0.55rem 1.4rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.bt-btn.bt-btn--teal-outline:hover {
background: rgba(0, 194, 255, 0.12);
}
/* On larger screens, gently center the covers row under the copy */
@media (min-width: 900px) {
.bt-home-hero__covers {
align-items: flex-start;
}
}
/* Center the stacked covers in the hero card */
.bt-home-hero__covers {
align-items: center;
}
/* Teal outline buttons (hero covers) */
.bt-btn.bt-btn--teal-outline {
border: 1px solid #00C2FF;
color: #00C2FF;
background: transparent;
border-radius: 999px;
padding: 0.55rem 1.4rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
box-shadow: 0 0 20px rgba(0, 194, 255, 0.4); /* teal glow, not red */
}
.bt-btn.bt-btn--teal-outline:hover {
background: rgba(0, 194, 255, 0.12);
}
/* Full-page background gradient override */
body {
background: radial-gradient(circle at top left, #111827 0%, #020617 45%, #000000 100%);
color: #f9fafb;
}
/* Hero copy: use full card width */
.bt-home-hero__copy {
width: 100%;
max-width: none;
}
/* Hero covers row at the bottom of the stack */
.bt-home-hero__covers {
display: flex;
flex-wrap: wrap;
justify-content: center; /* center on smaller screens */
align-items: flex-start;
gap: 2rem 3rem; /* vertical x horizontal gap */
margin-top: 1.5rem;
}
/* Book figures play nicely in a row */
.bt-hero-book {
text-align: center;
}
.bt-hero-book img {
max-width: 260px;
width: 100%;
height: auto;
display: block;
}
/* On wider screens, spread the two books to the sides a bit */
@media (min-width: 900px) {
.bt-home-hero__covers {
justify-content: space-between;
}
.bt-hero-book {
text-align: left;
}
}
/* =========================
HOME HERO – STACK + ROW
========================= */
/* Kill the 2-column grid and stack sections */
.bt-home-hero__grid {
display: flex;
flex-direction: column;
gap: 2.25rem;
}
/* Let the hero copy span the full card width */
.bt-home-hero__copy {
max-width: 100%;
}
/* Covers row at the bottom */
.bt-home-hero__covers {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* two columns on desktop */
align-items: flex-start;
gap: 2rem;
}
/* Each book behaves like a card in that row */
.bt-home-hero__cover {
flex: 0 0 min(260px, 48%);
text-align: center;
}
.bt-home-hero__cover img {
display: block;
width: 100%;
height: auto;
}
/* On smaller screens, let them wrap but stay centered */
@media (max-width: 768px) {
.bt-home-hero__covers {
justify-content: center;
}
.bt-home-hero__cover {
flex: 0 0 260px;
}
}
/* =========================
HOME HERO – FINAL LAYOUT
========================= */
/* Card spacing */
.bt-home-hero__card {
overflow: hidden;
}
/* Copy spans full width at top */
.bt-home-hero__copy {
max-width: 100%;
margin-bottom: 2rem;
}
/* Two book columns at bottom */
.bt-home-hero__covers-row {
display: flex;
flex-wrap: wrap;
justify-content: center; /* <- key fix */
align-items: flex-end; /* keeps bottoms aligned */
gap: clamp(24px, 6vw, 96px); /* nicer responsive spacing */
max-width: 760px; /* prevents the “wide void” */
margin-inline: auto; /* centers the whole row */
}
/* Each book column */
.bt-hero-book-col {
flex: 1 1 260px;
max-width: 320px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.bt-hero-book-col .bt-btn-row {
margin-top: auto; /* pins CTA to bottom */
}
.bt-hero-book img {
width: 100%;
height: auto;
display: block;
margin-inline: auto;
}
.bt-hero-book figcaption {
margin-top: 0.5rem;
}
/* Teal outline button (Observer) */
.bt-btn.bt-btn--teal-outline {
border: 1px solid #00C2FF;
color: #00C2FF;
background: transparent;
border-radius: 999px;
padding: 0.55rem 1.4rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
box-shadow: 0 0 20px rgba(0, 194, 255, 0.4);
}
.bt-btn.bt-btn--teal-outline:hover {
background: rgba(0, 194, 255, 0.12);
}
/* Mobile: stack the columns but keep them centered */
@media (max-width: 768px) {
.bt-home-hero__covers-row {
justify-content: center;
}
.bt-hero-book-col {
max-width: 260px;
}
}
/* HOME HERO — Desktop CTA alignment fix */
@media (min-width: 980px) {
/* Target BOTH button rows in the hero */
.home .bt-home-hero .bt-home-hero__cta-row,
.home .bt-home-hero .bt-home-hero__btn-row,
.home .bt-home-hero .bt-btn-row {
display: flex;
flex-wrap: wrap;
justify-content: center; /* key change */
align-items: stretch;
gap: 16px;
max-width: 920px; /* keeps spacing sane */
margin-inline: auto;
}
/* Make buttons feel consistent on desktop */
.home .bt-home-hero a.bt-btn,
.home .bt-home-hero .bt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px; /* consistent pill height */
padding: 14px 22px;
flex: 0 1 auto; /* don't stretch weirdly */
}
}
@media (min-width: 980px) {
.home .bt-home-hero a.bt-btn,
.home .bt-home-hero .bt-btn {
flex: 1 1 360px; /* equal-ish widths, wraps cleanly */
max-width: 420px; /* prevents giant pills */
}
}
/* =========================
2025-12 REFRESH: TYPE SYSTEM
========================= */
/* Body: Lora */
body {
font-family: "Lora", Georgia, "Times New Roman", serif;
}
/* H1: Cinzel Decorative */
h1 {
font-family: "Cinzel Decorative", "Times New Roman", serif;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* H2: Philosopher */
h2 {
font-family: "Philosopher", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 700;
letter-spacing: 0.06em;
}
/* All other headings fall back to Lora for a bookish, readable feel */
h3,
h4,
h5,
h6 {
font-family: "Lora", Georgia, "Times New Roman", serif;
font-weight: 700;
}
/* =========================
2025-12: Mobile nav / hamburger
========================= */
@media (max-width: 900px) {
/* Let header wrap: brand on top, menu/CTA below */
.bt-header-inner {
flex-wrap: wrap;
align-items: flex-start;
}
.bt-header-right {
width: 100%;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
/* Show the hamburger toggle on small screens */
.bt-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.6rem;
border-radius: 999px;
font-size: 1rem;
}
/* If you ever switch from the ☰ character to spans, these will draw the bars.
Right now they’re harmless if no spans exist. */
.bt-nav-toggle span {
display: block;
width: 18px;
height: 2px;
border-radius: 999px;
background: #f9fafb;
margin: 3px 0;
}
/* Hide the horizontal nav by default on small screens */
.bt-nav {
position: absolute;
top: 100%;
right: 1.5rem;
margin-top: 0.6rem;
padding: 0.75rem 0.9rem;
background: rgba(15, 23, 42, 0.98);
border-radius: 0.75rem;
border: 1px solid rgba(55, 65, 81, 0.9);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85);
display: none;
z-index: 65;
}
.bt-nav-list {
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
.bt-nav-list li a {
padding: 0.25rem 0.4rem;
}
/* When the header is "open", show the menu */
.bt-site-header.is-nav-open .bt-nav {
display: block;
}
/* Slightly shrink the header CTA on mobile so it all fits */
.bt-nav-cta {
font-size: 0.75rem;
padding: 0.45rem 0.9rem;
}
}
/* Desktop: always show nav, hide hamburger */
@media (min-width: 901px) {
.bt-nav {
position: static;
margin-top: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
display: flex;
}
.bt-nav-list {
flex-direction: row;
}
.bt-nav-toggle {
display: none;
}
}
/* ========== Mobile hero polish ========== */
@media (max-width: 768px) {
.bt-home-hero__card {
padding: 1.5rem 1.25rem;
}
.bt-home-hero__copy h1 {
font-size: 1.75rem; /* Cinzel Decorative, still big but not shouty */
line-height: 1.2;
}
.bt-home-hero__copy p {
font-size: 0.98rem;
}
.bt-home-hero__covers-row {
flex-direction: column;
gap: 1.25rem;
margin-top: 1.75rem;
}
.bt-hero-book img {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.bt-btn-row {
flex-wrap: wrap;
gap: 0.5rem;
}
.bt-btn-row .bt-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 768px) {
.bt-page-wrap,
.bt-card {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.bt-section {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.bt-book-page p,
.bt-book-page li {
font-size: 0.98rem;
line-height: 1.7;
}
}
@media (max-width: 768px) {
.bt-btn {
min-height: 44px;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.bt-nav-list li a {
padding: 0.4rem 0.6rem;
}
}
@media (max-width: 768px) {
.bt-mobile-cta-bar {
position: sticky;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
background: radial-gradient(circle at top, rgba(15,23,42,0.96), #020617);
padding: 0.6rem 0.85rem;
border-top: 1px solid rgba(148,163,184,0.3);
display: flex;
gap: 0.5rem;
}
.bt-mobile-cta-bar .bt-btn {
flex: 1 1 0;
font-size: 0.8rem;
padding: 0.55rem 0.5rem;
}
}
@media (max-width: 600px) {
.bt-award-badge img {
max-width: 120px;
}
/* Example: if something feels visually noisy, you can hide it */
/* .bt-home-spirits__note { display: none; } */
}
/* =========================
2025-12: Fix button text wrapping
========================= */
/* Allow button labels to wrap onto multiple lines */
.bt-btn {
white-space: normal;
text-align: center;
}
/* If the cookie banner button really needs to stay on one line, keep it there */
.bt-cookie-banner .bt-btn {
white-space: nowrap;
}
/* =========================
2025-12: Tweak "Start with The Observer" button
========================= */
/* Slightly tighter line-height so two-line labels look intentional */
.bt-btn--observer {
line-height: 1.35;
}
/* Don't apply the aggressive letter-spacing to the italic book title */
.bt-btn--observer em {
font-style: italic;
letter-spacing: 0; /* normal spacing for 'The Observer' */
}
@media (max-width: 768px) {
.bt-btn--observer {
font-size: 0.85rem;
letter-spacing: 0.08em; /* a bit less aggressive */
}
}
/* =========================
Fix "Start with The Observer" hero button layout
========================= */
/* Only affect the Observer CTA in the hero copy */
.bt-home-hero__copy .bt-btn--observer {
/* Stack the two pieces of text vertically, centered */
flex-direction: column;
align-items: center;
gap: 0.15rem;
line-height: 1.3;
}
/* Make the book title look like a normal title, not spaced-out caps */
.bt-home-hero__copy .bt-btn--observer em {
font-style: italic;
text-transform: none;
letter-spacing: 0; /* no extra tracking on the title */
font-size: 0.95em; /* slightly smaller so it nestles under "Start with" */
}
/* HOME — Reading Order section: normalize button layout on desktop */
@media (min-width: 980px) {
/* Ensure each book column can pin buttons to the bottom consistently */
.home .bt-reading-order__col,
.home .bt-reading-order .bt-col,
.home .bt-reading-order .bt-book-col {
display: flex;
flex-direction: column;
}
/* Make the button group behave the same in both columns */
.home .bt-reading-order .bt-btn-row,
.home .bt-reading-order__btn-row,
.home .bt-reading-order .bt-button-row {
display: flex;
flex-wrap: wrap;
justify-content: center; /* or center if you prefer */
gap: 16px;
margin-top: auto; /* pushes buttons to bottom of column */
}
/* Make buttons share space nicely (2-up when possible) */
.home .bt-reading-order .bt-btn-row .bt-btn,
.home .bt-reading-order .bt-btn-row a.bt-btn,
.home .bt-reading-order__btn-row .bt-btn,
.home .bt-reading-order__btn-row a.bt-btn {
flex: 1 1 240px; /* lets two buttons sit side-by-side */
max-width: 360px; /* prevents giant pills */
justify-content: center;
}
}
/* HOME: Reading Order section should be true 2-column (equal widths) */
@media (min-width: 901px) {
.home .bt-home-books__grid.bt-grid--2col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 901px) {
.home .bt-home-books__grid .bt-hero-book-col,
.home .bt-home-books__grid .bt-home-book {
display: flex;
flex-direction: column;
}
.home .bt-home-books__grid .bt-btn-row {
margin-top: auto;
}
}
/* ==========================================================================
SPIRIT SAGA - GLOBAL OVERRIDES (Killing the Cards & Pills)
========================================================================== */
/* 1. SECTIONS & CONTAINERS - Let it breathe */
.bt-section {
padding: 5rem 1rem;
background-color: transparent;
}
/* Remove hard borders that box the reader in */
.bt-section--bordered {
border-top: 1px solid rgba(255, 255, 255, 0.05); /* Minimal whisper of a line */
border-bottom: none !important;
}
/* 2. KILL THE CARDS - Make everything fluid and ethereal */
.bt-card,
.bt-review-card,
.sq-card,
.bt-ro-step-inner {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin-bottom: 3rem;
}
/* Turn review "cards" into editorial blockquotes */
.bt-review-card {
border-left: 2px solid var(--wp--preset--color--observer, #3b82f6) !important;
padding-left: 1.5rem !important;
}
/* 3. SHARPEN THE BUTTONS & BADGES */
.bt-btn,
.sq-btn,
.bt-link-pill,
.spirit-result-card__btn {
border-radius: 0 !important;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.4s ease-out;
background: transparent !important;
border: 1px solid #f3f4f6 !important;
color: #f3f4f6 !important;
padding: 0.75rem 1.5rem;
text-decoration: none;
display: inline-block;
}
/* Hover States - Ghostly, intangible energy */
.bt-btn:hover,
.sq-btn:hover,
.bt-link-pill:hover,
.spirit-result-card__btn:hover {
background: #f3f4f6 !important;
color: #0a0a0c !important;
box-shadow: 0 0 15px rgba(243, 244, 246, 0.3) !important;
transform: translateY(-2px);
}
/* Accent Buttons (Observer Specific - White) */
.bt-btn--observer,
.bt-btn--primary-teal {
border-color: var(--wp--preset--color--observer, #ffffff) !important;
color: var(--wp--preset--color--observer, #ffffff) !important;
}
.bt-btn--observer:hover,
.bt-btn--primary-teal:hover {
background: var(--wp--preset--color--observer, #ffffff) !important;
color: #0a0a0c !important;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important;
}
/* Flatten the badges */
.bt-badge,
.bt-award-pill,
.bt-ro-step-label {
border-radius: 0 !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 4. ASYMMETRICAL LAYOUT (Updated for card-less design) */
.bt-editorial-split {
display: grid;
grid-template-columns: 1fr;
gap: 3rem; /* Better breathing room on mobile */
}
@media (min-width: 768px) {
.bt-editorial-split {
/* Maintains the editorial 5/7 ratio */
grid-template-columns: 5fr 7fr;
/* Increases the gap so the image and text never touch */
gap: 5rem;
}
/* We removed the negative margin overlap so the text stays strictly in its lane */
.bt-editorial-split > *:first-child {
margin-right: 0;
}
}
/* ==========================================================================
UTILITY CLASSES
========================================================================== */
/* Universal sticky column behavior to clear the site header */
.bt-sticky-column {
position: sticky;
top: 6rem; /* Clears your main site header */
z-index: 10;
align-self: start; /* Ensures it doesn't stretch vertically in the grid */
}
/* Automatically bump it down an extra 32px when the WP Admin Bar is present */
body.admin-bar .bt-sticky-column {
top: calc(10rem + 32px);
}
/* ==========================================================================
SPIRIT SAGA HUD - BALANCED HEADER
========================================================================== */
.bt-site-header {
background-color: var(--wp--preset--color--abyssal, #0a0a0c);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 1.25rem 0;
position: relative;
z-index: 1000;
}
.bt-header-inner {
/* Reduced max-width to pull branding and nav closer */
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between; /* Keeps logo left, nav/cta right */
align-items: center;
}
/* Logo Sizing */
.bt-header-logo {
max-height: 55px; /* Slightly larger to act as a better anchor */
width: auto;
display: block;
}
/* Nav HUD Group */
.bt-header-right {
display: flex;
align-items: center;
gap: 1.5rem; /* Tightens the group of nav items and CTA */
}
.bt-nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.25rem; /* Sharp, compact spacing between links */
}
.bt-nav-list a {
font-family: var(--wp--preset--font-family--primary-heading, "Philosopher", sans-serif);
font-size: 0.75rem; /* Smaller, sharper text for the HUD look */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--wp--preset--color--bone, #f3f4f6);
text-decoration: none;
transition: all 0.3s ease;
opacity: 0.8; /* Subtle until hovered */
}
.bt-nav-list a:hover {
color: var(--wp--preset--color--observer, #ffffff);
opacity: 1;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
/* Primary CTA */
.bt-nav-cta {
padding: 0.5rem 1rem;
font-size: 0.7rem;
border: 1px solid var(--wp--preset--color--observer, #ffffff) !important;
white-space: nowrap; /* Prevents wrapping on smaller screens */
}
@media (max-width: 1024px) {
/* If the nav starts to feel crowded, we trigger the mobile menu sooner */
.bt-nav-toggle { display: block; }
.bt-nav { display: none; }
.bt-nav-cta { display: none; }
}
/* Sticky HUD Progress Bar */
.sq-progress-sticky {
position: sticky;
top: 10rem; /* Matches your header clearance */
z-index: 50;
background-color: var(--wp--preset--color--abyssal, #0a0a0c); /* Keeps background solid so text doesn't bleed through */
padding-top: 1rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Adjust for Admin Bar */
body.admin-bar .sq-progress-sticky {
top: calc(10rem + 32px);
}
/* Remove sticky from sidebar items if they shouldn't follow the scroll */
.bt-static-sidebar {
position: static;
margin-top: 4rem;
}
/* Sidebar HUD Styling */
.bt-quiz-sidebar-sticky {
position: sticky;
top: 10rem; /* Clears the header */
align-self: start;
z-index: 50;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
}
body.admin-bar .bt-quiz-sidebar-sticky {
top: calc(10rem + 32px);
}
/* Experience Block (Main Column Bottom) */
.bt-experience-footer {
margin-top: 5rem;
padding-top: 4rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* SPIRIT HUD TRIGGERS */
.bt-spirit-trigger {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #9ca3af;
padding: 1rem 2rem;
font-family: var(--wp--preset--font-family--primary-heading, "Philosopher", sans-serif);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
min-width: 150px;
}
.bt-spirit-trigger:hover,
.bt-spirit-trigger.is-active {
border-color: var(--spirit-color);
color: var(--spirit-color);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
text-shadow: 0 0 8px var(--spirit-color);
}
/* INTEL PANEL HUD */
.bt-intel-panel {
height: 0;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
border: 0 solid rgba(255, 255, 255, 0.1);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.bt-intel-panel.is-open {
height: auto;
min-height: 200px;
padding: 3rem;
border-width: 1px;
margin-top: 1rem;
}
.bt-intel-close {
position: absolute;
top: 1rem;
right: 1.5rem;
background: transparent;
border: none;
color: #9ca3af;
font-size: 1.5rem;
cursor: pointer;
}
.bt-intel-content h3 {
font-family: var(--wp--preset--font-family--primary-serif);
font-size: 2.2rem;
margin-bottom: 1rem;
}
.bt-intel-content p {
font-size: 1.1rem;
line-height: 1.6;
color: var(--wp--preset--color--bone);
max-width: 700px;
}
.bt-intel-placeholder {
color: #4b5563;
text-align: center;
font-style: italic;
}
/* MOBILE MENU OVERLAY */
@media (max-width: 960px) {
.is-nav-open .bt-nav {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--wp--preset--color--abyssal, #0a0a0c);
z-index: 999;
padding: 6rem 2rem;
}
.is-nav-open .bt-nav-list {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.is-nav-open .bt-nav-list a {
font-size: 1.5rem;
}
/* Transform the Toggle into an 'X' when open */
.is-nav-open .bt-nav-toggle {
z-index: 1001;
border-color: var(--wp--preset--color--observer, #ffffff);
}
.is-nav-open .bt-nav-toggle::before {
content: '✕';
color: white;
font-size: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
}
}
/* GLOBAL FIX: Prevent side-scrolling */
html, body {
overflow-x: hidden;
width: 100%;
position: relative;
}
/* MOBILE MENU OVERLAY: Forced Fullscreen */
@media (max-width: 960px) {
.bt-nav {
/* Ensure it's hidden by default and doesn't take up space */
display: none;
}
.is-nav-open .bt-nav {
display: flex !important;
position: fixed;
top: 0;
left: 0; /* Forced to the absolute left of the screen */
width: 100vw;
height: 100vh;
background: var(--wp--preset--color--abyssal, #0a0a0c);
z-index: 9999;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
}
.bt-nav-list {
flex-direction: column;
gap: 2rem;
text-align: center;
padding: 0;
}
.bt-nav-list a {
font-size: 1.8rem; /* Big, readable mobile links */
letter-spacing: 3px;
}
/* Fixed Toggle Position when Open */
.is-nav-open .bt-nav-toggle {
position: fixed;
top: 1.5rem;
right: 1.5rem;
z-index: 10000;
border-color: var(--wp--preset--color--observer, #ffffff);
background: var(--wp--preset--color--abyssal);
}
}
/* SOCIAL PROOF & REVIEW MOBILE FIX */
@media (max-width: 768px) {
/* Force the awards split into a stack */
.bt-reviews-award .bt-editorial-split {
grid-template-columns: 1fr !important;
text-align: center;
gap: 3rem;
}
/* Center the badges and remove fixed widths */
.bt-reviews-award figure {
max-width: 160px !important; /* Slightly smaller for mobile screens */
margin: 0 auto !important;
}
/* Stack the review quotes grid */
.bt-reviews-section div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 2.5rem !important;
}
/* Align quote borders to the top on mobile for better flow */
.bt-reviews-section article {
border-left: none !important;
border-top: 2px solid var(--wp--preset--color--observer, #ffffff);
padding-left: 0 !important;
padding-top: 1.5rem;
text-align: center;
}
}
/* ==========================================================================
SOCIAL PROOF RESPONSIVE HUD
========================================================================== */
/* Desktop: Sharp 1:2 split */
@media (min-width: 768px) {
.bt-award-split {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
align-items: center;
}
}
/* Mobile: Stack and center */
@media (max-width: 767px) {
.bt-award-split {
display: flex;
flex-direction: column;
gap: 3rem;
text-align: center;
}
}
/* Badge styling */
.bt-award-badges {
display: flex;
flex-direction: column;
gap: 2rem;
}
.bt-award-badges img {
max-width: 140px;
margin: 0 auto;
height: auto;
}
/* Quote styling with Observer White borders */
.bt-quote-item {
border-left: 2px solid var(--wp--preset--color--observer, #ffffff);
padding-left: 1.5rem;
margin-bottom: 2rem;
}
.bt-quote-item p {
font-size: 1.2rem;
font-style: italic;
line-height: 1.4;
color: var(--wp--preset--color--bone);
}
.bt-quote-source {
font-weight: bold;
margin-top: 0.5rem;
color: #9ca3af;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
}
/* Mobile Tweak for Quotes */
@media (max-width: 767px) {
.bt-quote-item {
border-left: none;
border-top: 1px solid rgba(255,255,255,0.1);
padding-left: 0;
padding-top: 2rem;
}
}
/* MOBILE MENU OVERLAY: Scrollable HUD Version */
@media (max-width: 960px) {
.is-nav-open {
overflow: hidden; /* Prevent the background page from scrolling */
}
.is-nav-open .bt-nav {
display: flex !important;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--wp--preset--color--abyssal, #0a0a0c);
z-index: 9999;
flex-direction: column;
/* Changed from center to flex-start + padding for scrolling */
justify-content: flex-start;
align-items: center;
padding: 6rem 2rem 4rem;
/* Crucial: Allows the menu itself to scroll if it's taller than the screen */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.bt-nav-list {
display: flex;
flex-direction: column;
gap: 1.25rem; /* Tightened gap from 2rem to 1.25rem */
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.bt-nav-list a {
font-size: 1.2rem; /* Reduced from 1.8rem to fit more on screen */
letter-spacing: 2px;
display: block;
padding: 0.5rem 0;
}
/* Sub-menu styling for mobile (if applicable) */
.bt-nav-list .sub-menu {
list-style: none;
padding: 0;
margin-top: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.bt-nav-list .sub-menu a {
font-size: 0.9rem;
opacity: 0.7;
letter-spacing: 1px;
}
/* Keep the toggle button visible and fixed */
.is-nav-open .bt-nav-toggle {
position: fixed;
top: 1rem;
right: 1.5rem;
z-index: 10000;
background: var(--wp--preset--color--abyssal);
border-color: var(--wp--preset--color--observer);
}
}
/* Force the header to the front when the HUD is active */
.is-nav-open .bt-site-header {
z-index: 99999 !important;
position: relative;
}
/* Ensure the nav itself is fixed and clears everything */
@media (max-width: 960px) {
.bt-nav {
display: none;
}
.is-nav-open .bt-nav {
display: flex !important;
position: fixed; /* Locked to the screen */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--wp--preset--color--abyssal, #0a0a0c);
z-index: 100000; /* Higher than the header itself */
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 8rem 2rem 4rem; /* Lowered start point to clear the toggle */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Keep the toggle button above the menu overlay */
.is-nav-open .bt-nav-toggle {
position: fixed;
top: 1.5rem;
right: 1.5rem;
z-index: 100001;
background: var(--wp--preset--color--abyssal);
border: 1px solid var(--wp--preset--color--observer);
}
}
/* FORCE BREAKOUT: Ensure no parent container traps the header */
body.is-nav-open,
body.is-nav-open #page,
body.is-nav-open .site,
body.is-nav-open .wp-site-blocks {
overflow: visible !important;
isolation: auto !important;
z-index: auto !important;
transform: none !important; /* Transforms create new stacking contexts */
}
/* Elevate the Header specifically */
body.is-nav-open .bt-site-header {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
z-index: 999999 !important;
}
/* Ensure the Nav is the absolute highest point in the universe */
body.is-nav-open .bt-nav {
display: flex !important;
position: fixed !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #0a0a0c !important; /* Abyssal Black */
z-index: 1000000 !important;
flex-direction: column;
padding: 8rem 2rem;
overflow-y: auto;
}
/* Keep the Toggle button above the menu */
body.is-nav-open .bt-nav-toggle {
position: fixed !important;
z-index: 1000001 !important;
top: 1.5rem;
right: 1.5rem;
}
/* 1. Target the content containers specifically */
body.is-nav-open main,
body.is-nav-open #content,
body.is-nav-open .bt-site-main,
body.is-nav-open #primary {
z-index: 1 !important;
position: relative !important;
transform: none !important;
filter: blur(4px) brightness(0.3) !important; /* Visual confirmation it's working */
pointer-events: none !important; /* Stop the background from being clickable */
opacity: 0.1 !important;
}
/* 2. Force the Header and Nav to the absolute front */
body.is-nav-open .bt-site-header,
body.is-nav-open header {
z-index: 99999999 !important;
position: fixed !important;
width: 100% !important;
top: 0 !important;
left: 0 !important;
background: transparent !important;
}
/* 3. The HUD Overlay itself */
body.is-nav-open .bt-nav {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: #0a0a0c !important; /* Abyssal Black */
z-index: 100000000 !important; /* Higher than the header */
padding: 8rem 2rem;
overflow-y: auto !important;
}
/* 1. LOCK THE BODY: Prevents the background page from moving */
body.is-nav-open {
overflow: hidden !important;
height: 100vh !important;
}
/* 2. BREAK THE CLIPPING: Force all header parents to show overflow */
body.is-nav-open .bt-site-header,
body.is-nav-open .bt-header-inner,
body.is-nav-open .bt-header-right,
body.is-nav-open #page,
body.is-nav-open .site {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* 3. THE HUD OVERLAY: Absolute Viewport Position */
@media (max-width: 960px) {
.is-nav-open .bt-nav {
display: flex !important;
position: fixed !important;
/* Force it to the top-left of the physical screen, not the header */
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
/* THE Lore: Abyssal Black */
background-color: #0a0a0c !important;
z-index: 9999999 !important;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 8rem 2rem 4rem;
/* Allows the links to scroll within the HUD */
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.is-nav-open .bt-nav-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
}
/* Ensure the Toggle Button stays on top of the HUD */
.is-nav-open .bt-nav-toggle {
position: fixed !important;
top: 1.5rem !important;
right: 1.5rem !important;
/* This MUST be higher than the .bt-nav z-index */
z-index: 100000001 !important;
background: var(--wp--preset--color--abyssal, #0a0a0c) !important;
border: 1px solid var(--wp--preset--color--observer, #ffffff) !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
}
/* Create the 'X' icon visually */
.is-nav-open .bt-nav-toggle::before {
content: '✕'; /* Unicode multiplication X */
color: var(--wp--preset--color--observer, #ffffff);
font-size: 1.5rem;
font-weight: bold;
line-height: 1;
}
/* Hide the original hamburger lines when open */
.is-nav-open .bt-nav-toggle .bt-toggle-icon {
display: none !important;
}
/* Ensure the Nav Overlay is just below the toggle */
.is-nav-open .bt-nav {
z-index: 100000000 !important;
}
/* ==========================================================================
LORE OVERRIDES: BOOK-SPECIFIC STYLING
========================================================================== */
/* Force The Observer links to remain White (Observer Energy) */
.bt-btn--observer,
a[href*="the-observer"].bt-btn,
.bt-section--demon a[href*="the-observer"].bt-btn {
color: var(--wp--preset--color--observer, #ffffff) !important;
border-color: var(--wp--preset--color--observer, #ffffff) !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
.bt-btn--observer:hover,
a[href*="the-observer"].bt-btn:hover {
background-color: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
/* Force The Demon links to remain Red (Demon Energy) */
.bt-btn--demon,
a[href*="the-demon"].bt-btn,
.bt-section--observer a[href*="the-demon"].bt-btn {
color: var(--wp--preset--color--demon, #ef4444) !important;
border-color: var(--wp--preset--color--demon, #ef4444) !important;
text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}
.bt-btn--demon:hover,
a[href*="the-demon"].bt-btn:hover {
background-color: rgba(239, 68, 68, 0.05);
box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}
/* Target text links specifically on the-demon page */
.page-child.parent-pageid-xxx a[href*="the-observer"], /* Adjust if using child pages */
.bt-section--demon a[href*="the-observer"],
.single-product a[href*="the-observer"],
body.page-template-default a[href*="the-observer"] {
color: #ffffff !important;
text-decoration: underline;
font-weight: 600;
}
/* Ensure it stays white on hover too */
.bt-section--demon a[href*="the-observer"]:hover {
color: #ffffff !important;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
a[href*="the-observer"] {
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
/* ==========================================================================
SPIRIT SAGA HUD: BUTTON HOVER LOGIC
========================================================================== */
/* 1. Global Button Reset */
.bt-btn {
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-align: center;
display: inline-block;
cursor: pointer;
}
/* 2. Observer (White) Hover Logic */
.bt-btn--observer,
a[href*="the-observer"].bt-btn {
background-color: transparent;
color: #ffffff !important;
border: 1px solid #ffffff !important;
}
.bt-btn--observer:hover,
a[href*="the-observer"].bt-btn:hover {
background-color: #ffffff !important;
color: #0a0a0c !important; /* Abyssal Black text on hover */
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
/* 3. Demon (Red) Hover Logic */
.bt-btn--demon,
a[href*="the-demon"].bt-btn {
background-color: transparent;
color: #ef4444 !important;
border: 1px solid #ef4444 !important;
}
.bt-btn--demon:hover,
a[href*="the-demon"].bt-btn:hover {
background-color: #ef4444 !important;
color: #0a0a0c !important; /* Abyssal Black text on hover */
box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}
/* 4. Ghost / General CTA Hover Logic */
.bt-btn--ghost {
background-color: transparent;
color: #9ca3af !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.bt-btn--ghost:hover {
background-color: #f3f4f6 !important; /* Bone White bg */
color: #0a0a0c !important; /* Abyssal Black text */
border-color: #f3f4f6 !important;
}
/* ==========================================================================
SPIRIT TYPE TEST: STICKY HUD FIX
========================================================================== */
/* 1. The Parent Wrapper: Must be flex-start to allow the sidebar to move */
.bt-quiz-page .bt-editorial-split {
display: flex;
align-items: flex-start !important; /* Prevents sidebar from stretching to full height */
gap: 4rem;
position: relative;
}
/* 2. The Sidebar Container */
.bt-quiz-sidebar-sticky {
position: -webkit-sticky; /* Support for Safari */
position: sticky !important;
top: 10rem; /* Adjusted to clear your sharp header HUD */
align-self: flex-start; /* Crucial: allows it to stick within its track */
width: 300px; /* Consistent HUD width */
z-index: 10;
}
/* Adjust for WordPress Admin Bar */
body.admin-bar .bt-quiz-sidebar-sticky {
top: calc(10rem + 32px);
}
/* 3. Mobile handling: Stickiness usually feels cramped on small screens */
@media (max-width: 960px) {
.bt-quiz-sidebar-sticky {
position: static !important;
width: 100%;
margin-bottom: 2rem;
}
}
/* ==========================================================================
THE STICKY UNLOCKER
========================================================================== */
/* Unlock parent containers that are likely killing the sticky scroll */
.bt-quiz-page,
.bt-quiz-page #primary,
.bt-quiz-page #main,
.bt-quiz-page .site-content,
.bt-quiz-page .entry-content,
.bt-quiz-page .wp-block-group {
overflow: visible !important;
clip-path: none !important;
display: block !important; /* Ensures no weird layout shifts */
}
/* Ensure the Flex container itself doesn't trap the sidebar */
.bt-quiz-page .bt-editorial-split {
display: flex !important;
align-items: flex-start !important;
overflow: visible !important;
}
/* The Sidebar Fix */
.bt-quiz-sidebar-sticky {
position: -webkit-sticky !important;
position: sticky !important;
top: 6rem !important; /* Lowered it slightly for better HUD clearance */
align-self: flex-start !important;
z-index: 100 !important;
}
/* Ensure nothing else on the page is creating a 'Layering Trap' */
body:not(.is-nav-open) .bt-quiz-page {
position: relative !important;
z-index: 1;
}
/* 1. THE STICKY RESTORATION */
html, body {
overflow-x: visible !important; /* MUST be visible for sticky to work */
height: auto !important;
}
/* Stop the 'wobble' on the inner wrapper instead */
#page, .site, .wp-site-blocks {
overflow-x: hidden !important;
position: relative;
width: 100%;
}
/* 2. THE HEADER HUD (Fixed back to top) */
.bt-site-header {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background: rgba(10, 10, 12, 0.95); /* Abyssal Black with slight transparency */
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* 3. THE QUIZ SIDEBAR (Specific Unlock) */
.bt-quiz-page #primary,
.bt-quiz-page #main,
.bt-quiz-page .site-main,
.bt-quiz-page .entry-content {
overflow: visible !important; /* Removes the 'clipping' from parents */
display: block !important;
}
.bt-quiz-sidebar-sticky {
position: -webkit-sticky !important;
position: sticky !important;
top: 8rem !important; /* Distance from top of screen */
align-self: flex-start !important;
z-index: 100;
}
/* ==========================================================================
HEADER OFFSET: Content Visibility Fix
========================================================================== */
/* 1. Global Page Offset */
#page, .site-main, .main-content {
margin-top: 100px; /* Adjust this to match your header's physical height */
}
/* 2. Admin Bar Correction */
/* When logged in, we need to account for both the header and the WP bar */
body.admin-bar #page,
body.admin-bar .site-main {
margin-top: calc(100px + 32px);
}
/* 3. Mobile Offset */
/* Mobile headers are usually shorter; adjust accordingly */
@media (max-width: 960px) {
#page, .site-main {
margin-top: 80px;
}
body.admin-bar #page {
margin-top: calc(80px + 46px); /* WP mobile admin bar is taller */
}
}
/* 4. Anchor Link Offset */
/* This prevents 'Jump Links' from hiding the heading behind the header */
*[id] {
scroll-margin-top: 120px;
}
/* THE HEADER BUFFER: Pushing content out from under the HUD */
/* Target the first section of every page */
main > section:first-of-type,
.bt-site-main > section:first-of-type,
.entry-content > section:first-of-type,
.bt-home-hero,
.bt-quiz-page {
padding-top: 120px !important; /* Adjust this based on your header's height */
}
/* Specific Adjustment for The Demon & The Observer landing pages */
.bt-section--demon,
.bt-section--observer {
padding-top: 140px !important; /* A bit extra for the big editorial titles */
}
/* Account for the WordPress Admin Bar when logged in */
body.admin-bar main > section:first-of-type,
body.admin-bar .bt-site-main > section:first-of-type {
padding-top: calc(120px + 32px) !important;
}
@media (max-width: 960px) {
main > section:first-of-type,
.bt-site-main > section:first-of-type {
padding-top: 100px !important;
}
}
/* 1. TYPOGRAPHY: The "Lore" System */
h1 {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.2); /* Ethereal glow for main titles */
letter-spacing: 0.1em;
}
/* 2. HUD BUTTONS: Sharper, More Intangible */
.bt-btn {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
background: rgba(10, 10, 12, 0.6) !important; /* Semi-transparent Abyssal */
backdrop-filter: blur(5px);
}
.bt-btn:hover {
border-color: #ffffff !important;
box-shadow: 0 0 25px rgba(255, 255, 255, 0.15);
}
/* 3. BOOK VISUALS: Depth without Boxes */
.bt-hero-visuals img {
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.9));
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bt-hero-visuals a:hover img {
transform: scale(1.05) translateY(-10px) rotate(0deg) !important;
}
/* ==========================================================================
SERIES HUD TIMELINE (Reading Order & Lore)
========================================================================== */
.bt-series-hud {
position: -webkit-sticky;
position: sticky;
top: 8rem; /* Clears the site header */
padding-right: 2rem;
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
body.admin-bar .bt-series-hud {
top: calc(8rem + 32px);
}
.bt-timeline-list {
list-style: none;
padding: 0;
margin: 0 0 3rem 0;
position: relative;
}
/* The vertical "thread" of the timeline */
.bt-timeline-list::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 4px;
width: 1px;
background: rgba(255, 255, 255, 0.1);
z-index: 0;
}
.bt-timeline-item {
position: relative;
padding-left: 2rem;
margin-bottom: 2rem;
z-index: 1;
}
/* The timeline nodes */
.bt-timeline-link {
font-family: var(--wp--preset--font-family--primary-heading, "Philosopher", sans-serif);
font-size: 1rem;
color: #9ca3af;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
display: block;
}
.bt-timeline-link::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 9px;
height: 9px;
background: var(--wp--preset--color--abyssal, #0a0a0c);
border: 1px solid #9ca3af;
border-radius: 50%;
transition: all 0.3s ease;
}
/* Active State: The Glow */
.bt-timeline-item.is-active .bt-timeline-link {
color: var(--wp--preset--color--observer, #ffffff);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.bt-timeline-item.is-active .bt-timeline-link::before {
background: var(--wp--preset--color--observer, #ffffff);
border-color: var(--wp--preset--color--observer, #ffffff);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}
/* Direct Sales Upsell Box within the HUD */
.bt-hud-upsell {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem;
text-align: left;
}
.bt-hud-upsell-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--wp--preset--color--demon, #ef4444); /* Red alert for incomplete status */
margin-bottom: 0.5rem;
}