/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #160B35;
--primary-light: #221338;
--accent: #2B52DE;
--gold: #D3A56E;
--bg: #160B35;
--white: #ffffff;
--card: #221338;
--text: #E8E0F0;
--text-light: #9B8FB8;
--border: #3A2A55;
--success: #28a745;
--danger: #dc3545;
--radius: 8px;
/* Translucent surface used over the branded gradient — it picks up whatever
is behind it, so panels sit ON the gradient rather than punching a flat
dark hole through it. */
--color_surface_default: rgba(255, 255, 255, 0.07);
/* A field sits inside a surface, so it needs to be lighter than one to read
as raised — at the same value it looks like a hole in the card. */
--color_surface_raised: rgba(255, 255, 255, 0.16);
--color_surface_border: rgba(255, 255, 255, 0.10);
}
/* Backstop for iOS Safari's elastic overscroll: bouncing past the end of the
page briefly exposes the area behind , and with no background of its
own defaults to white — a flash of white at the bottom of every
page on mobile. Same value as body's own background (including a shop
owner's custom --hero-bg from Branding settings), just without
background-attachment: fixed — this is only ever visible for an instant
during the bounce, not something that needs to track scroll position. */
html {
background: var(--hero-bg, radial-gradient(ellipse farthest-corner at 0% 0%,
rgba(44,19,95,1) 0%, #160B35 100%));
/* A short page (little content, e.g. a bare-bones service page) is
shorter than the viewport on its own, so without this html's (and
body's) rendered box stops short of the screen's bottom edge — the
browser's own default white canvas shows through below it, reading as
the same stray white footer the overscroll fix above was for, just
from page height rather than the elastic bounce. */
min-height: 100%;
}
body {
font-family: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
/* The branded gradient from Branding settings, on every page. Fixed, so it
reads as one gradient down a long page rather than restarting per screen. */
background: var(--hero-bg, radial-gradient(ellipse farthest-corner at 0% 0%,
rgba(44,19,95,1) 0%, #160B35 100%));
background-attachment: fixed;
color: var(--text);
line-height: 1.6;
min-height: 100vh;
}
a { color: var(--gold); text-decoration: none; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* Banner — a slim announcement bar: text and an optional countdown grouped
together and centered in the bar, laid out on top of whatever bg_color the
admin picked (via color-mix/currentColor tricks) rather than a hardcoded
color, so the same layout reads right whatever color a given banner is.
Stays a single row at every viewport width, including mobile. */
.banner {
position: relative;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.banner-inner {
position: relative;
display: flex; align-items: center; justify-content: center;
gap: 32px; flex-wrap: nowrap;
max-width: 1200px; margin: 0 auto;
}
a.banner-inner { text-decoration: none; }
.banner-text { display: flex; flex-direction: column; text-align: left; gap: 2px; min-width: 0; }
.banner-heading { font-family: var(--font-display); font-size: 24px; font-weight: 900; letter-spacing: 0.03em; }
.banner-subtext { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.78; }
.banner-countdown {
display: flex; align-items: center; gap: 8px;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.banner-cd-unit { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.banner-cd-num { font-size: 19px; font-weight: 700; }
.banner-cd-label { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; }
.banner-cd-sep { font-size: 17px; font-weight: 700; opacity: 0.6; align-self: flex-start; margin-top: 1px; }
@media (max-width: 480px) {
.banner { padding: 8px 12px; }
.banner-inner { gap: 10px; }
.banner-heading { font-size: 13px; }
.banner-subtext { font-size: 9px; }
.banner-countdown { gap: 5px; }
.banner-cd-num { font-size: 15px; }
.banner-cd-label { font-size: 7px; }
.banner-cd-sep { font-size: 13px; }
}
/* Sale coupon promo box — a dark card below the product's long description
(desktop) / right above the Buy Now button (mobile, see the order overrides
in the @media (max-width: 900px) block below) advertising this sale's
coupon code, with a 4-tile countdown. Reuses --card (the same dark surface
as the site's other dark cards) rather than a new hex value, and the same
.banner-countdown[data-countdown] wiring as the top banner — banner.js
ticks it and removes the whole box at zero with no JS changes needed here.
This replaced an earlier, smaller "sale-countdown-badge" pill that showed
near the price row; the promo box now covers that job too. */
.sale-promo-box {
background: #755b90;
border-radius: var(--radius);
padding: 20px;
margin-top: 20px;
text-align: center;
}
.sale-promo-text {
font-family: var(--font-heading);
color: var(--white);
font-size: 16px;
line-height: 1.5;
margin-bottom: 16px;
}
.sale-promo-icon { margin-right: 2px; }
.sale-promo-countdown {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: nowrap;
}
.sale-promo-cd-unit {
background: #fff;
border-radius: 10px;
padding: 7px 10px;
min-width: 64px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.sale-promo-cd-num {
font-size: 16px;
font-weight: 800;
color: var(--primary);
font-variant-numeric: tabular-nums;
}
.sale-promo-cd-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-light);
}
@media (max-width: 480px) {
.sale-promo-box { padding: 16px; }
.sale-promo-text { font-size: 14px; margin-bottom: 12px; }
.sale-promo-countdown { gap: 6px; }
.sale-promo-cd-unit { padding: 8px 10px; min-width: 52px; }
.sale-promo-cd-num { font-size: 18px; }
.sale-promo-cd-label { font-size: 9px; }
}
/* Navbar */
.navbar {
background: var(--primary);
border-bottom: 1px solid var(--border);
padding: 16px 0;
position: sticky;
top: 0;
z-index: 100;
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.nav-brand { font-size: 24px; font-weight: 700; color: var(--white); }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a { color: var(--text); font-weight: 500; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; }
.nav-links a:hover { color: var(--gold); }
/* Main menu dropdowns */
.nav-item { position: relative; }
.nav-item > a .caret { font-size: 10px; opacity: 0.7; }
.nav-sub {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 210px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
padding: 8px 0;
z-index: 200;
}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub.open .nav-sub { display: block; }
.nav-sub a {
display: block;
padding: 9px 18px;
text-transform: none;
letter-spacing: 0;
font-size: 14px;
white-space: nowrap;
}
.nav-sub a:hover { background: var(--primary); color: var(--gold); }
.nav-burger { display: none; background: none; border: none; color: var(--white); font-size: 24px; cursor: pointer; }
@media (max-width: 900px) {
.nav-burger { display: block; }
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
background: var(--primary);
border-top: 1px solid var(--border);
padding: 8px 20px 16px;
}
.nav-links.open { display: flex; }
.nav-item, .nav-links > .cart-link { width: 100%; }
.nav-item > a { display: block; padding: 12px 0; }
.nav-sub { position: static; display: block; border: none; box-shadow: none; background: transparent; padding: 0 0 8px 14px; }
.nav-sub a { padding: 8px 0; }
}
.cart-link { position: relative; }
.cart-badge {
position: absolute;
top: -8px;
right: -12px;
background: var(--gold);
color: var(--primary);
font-size: 11px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Buttons */
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: var(--radius);
/* Gotham Medium — same face used for h2, nav and FAQ questions — rather
than the body's Gotham Book. */
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
}
.btn:hover { opacity: 0.9; }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: #3D63E8; }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-large { padding: 14px 28px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
/* Flash Messages */
.flash-messages { margin: 20px 0; }
.flash {
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 10px;
}
.flash-success { background: rgba(40, 167, 69, 0.15); color: #5ced73; border: 1px solid rgba(40, 167, 69, 0.3); }
.flash-error { background: rgba(220, 53, 69, 0.15); color: #ff7b86; border: 1px solid rgba(220, 53, 69, 0.3); }
/* Shop Layout */
.shop-header { padding: 40px 0 20px; }
/* size comes from .page-title, shared with the cart, courses and events */
.shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding-bottom: 60px; }
.shop-filters h3 { margin-bottom: 16px; font-size: 16px; display: inline; }
.shop-filters-collapse > summary { list-style: none; }
.shop-filters-collapse > summary::-webkit-details-marker { display: none; }
.shop-filters-collapse > summary::marker { content: ''; }
.filter-group { margin-bottom: 24px; }
.filter-group h4 { font-size: 13px; color: var(--text-light); text-transform: uppercase; margin-bottom: 8px; }
.filter-link {
display: block;
padding: 6px 12px;
color: var(--text);
border-radius: 4px;
font-size: 14px;
}
.filter-link:hover { background: var(--card); }
.filter-link.active { background: var(--accent); color: var(--white); }
/* Product Grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.product-card {
background: var(--card);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.product-card a { display: block; }
.product-image { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.product-image-placeholder { width: 100%; aspect-ratio: 1/1; background: linear-gradient(135deg, #2A1B4A, #3A2A55); }
.product-image-placeholder.large { height: 400px; }
.product-info { padding: 16px; }
.product-category { font-size: 12px; color: var(--gold); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.product-name { font-size: 16px; margin: 4px 0 8px; color: var(--white); }
.product-price { display: flex; align-items: center; gap: 8px; }
.price-current { font-size: 18px; font-weight: 700; color: var(--white); }
.price-compare { font-size: 14px; color: var(--text-light); text-decoration: line-through; }
.add-to-cart-form { padding: 0 16px 16px; }
.add-to-cart-form .btn { width: 100%; text-align: center; }
.add-to-cart-form.detail { display: flex; align-items: end; gap: 16px; margin-top: 24px; }
.add-to-cart-form.detail .btn { width: auto; }
.no-products { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: var(--text-light); }
/* Product Hero */
.product-hero {
background: var(--primary);
color: #fff;
padding: 60px 0;
}
.product-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.product-hero-image img {
width: 100%;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.product-image-placeholder.large { height: 400px; background: rgba(255,255,255,0.05); border-radius: 12px; }
.product-category-hero {
display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--gold);
margin-bottom: 12px;
}
.product-hero-info h1 {
font-size: 36px;
font-weight: 800;
color: #fff;
line-height: 1.2;
margin-bottom: 16px;
}
.product-price-hero { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.price-current-hero { font-size: 32px; font-weight: 800; color: #fff; }
.price-compare-hero { font-size: 20px; color: rgba(255,255,255,0.5); text-decoration: line-through; }
.product-short-desc-hero { color: rgba(255,255,255,0.8); font-size: 18px; line-height: 1.6; margin-bottom: 20px; }
.product-bullets-hero {
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.product-bullets-hero li {
padding: 6px 0 6px 28px;
position: relative;
color: rgba(255,255,255,0.9);
font-size: 15px;
}
.product-bullets-hero li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--gold);
font-weight: 700;
}
.btn-hero {
display: inline-block;
background: var(--accent);
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 16px 36px;
border-radius: var(--radius);
font-size: 18px;
font-weight: 700;
text-align: center;
border: none;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
}
.btn-hero:hover { opacity: 0.92; transform: translateY(-1px); color: #fff; }
/* Bottom CTA */
.product-cta-bottom {
background: var(--primary);
color: #fff;
padding: 40px 0;
margin-top: 40px;
}
.cta-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.cta-bottom-inner h2 { color: #fff; font-size: 22px; }
/* Field errors */
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }
/* Legacy badge (kept for admin use) */
.product-type-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin: 12px 0;
}
.badge-digital { background: #e3f2fd; color: #1565c0; }
.badge-physical { background: #e8f5e9; color: #2e7d32; }
.badge-course { background: #fce4ec; color: #c62828; }
/* Cart */
/* The shared .page-title has no top margin, so the cart's heading sat flush
against the nav bar underneath it — everywhere else that uses .page-title
has its own hero/section padding above it, the cart doesn't. */
.cart-page-title { margin-top: 32px; }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; padding: 20px 0 60px; }
.cart-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: var(--card);
border-radius: var(--radius);
margin-bottom: 12px;
border: 1px solid var(--border);
}
.cart-item-image { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }
.cart-item-image-placeholder { width: 80px; height: 80px; background: var(--border); border-radius: 4px; }
.cart-item-info { flex: 1; }
.cart-item-info h3 { font-size: 15px; }
.cart-item-price { color: var(--text-light); font-size: 14px; }
.cart-item-quantity input { width: 60px; padding: 6px; border: 1px solid var(--border); border-radius: 4px; text-align: center; }
.cart-item-total { font-weight: 700; min-width: 80px; text-align: right; }
.btn-remove { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-light); padding: 4px 8px; }
.btn-remove:hover { color: var(--danger); }
/* Cart Summary */
.cart-summary {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
height: fit-content;
position: sticky;
top: 80px;
}
.cart-summary h3 { margin-bottom: 16px; }
.summary-line { display: flex; justify-content: space-between; padding: 8px 0; }
.summary-line.discount { color: var(--success); }
.summary-line.total { border-top: 2px solid var(--gold); padding-top: 12px; font-size: 18px; font-weight: 700; color: var(--white); }
.btn-remove-coupon { background: none; border: none; cursor: pointer; color: var(--danger); margin-left: 8px; }
.coupon-form { display: flex; gap: 8px; margin: 16px 0; }
.coupon-input {
flex: 1; padding: 8px 12px; border: 1px solid var(--color_surface_border);
border-radius: var(--radius); text-transform: uppercase;
background: var(--color_surface_raised); color: var(--white);
}
.checkout-form { margin-top: 20px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 14px;
background: var(--primary);
color: var(--white);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-light); }
.btn-checkout { width: 100%; text-align: center; margin-top: 8px; }
.empty-cart { text-align: center; padding: 80px 0; }
.empty-cart p { margin-bottom: 20px; color: var(--text-light); font-size: 18px; }
/* Order Summary */
.order-summary { max-width: 700px; margin: 40px auto; padding-bottom: 60px; }
.order-success { text-align: center; padding: 30px; background: rgba(40,167,69,0.15); border: 1px solid rgba(40,167,69,0.3); border-radius: var(--radius); margin-bottom: 30px; }
.order-success h1 { color: #5ced73; }
.order-pending { text-align: center; padding: 30px; background: rgba(255,193,7,0.15); border: 1px solid rgba(255,193,7,0.3); border-radius: var(--radius); margin-bottom: 30px; }
.order-details > h2 { margin-bottom: 16px; }
.order-meta { background: var(--card); padding: 20px; border-radius: var(--radius); margin-bottom: 20px; }
.order-meta p { margin-bottom: 4px; }
.order-items-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.order-items-table th, .order-items-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.order-items-table th { background: var(--primary); font-size: 13px; text-transform: uppercase; color: var(--text-light); }
.order-items-table tfoot .total td { font-weight: 700; font-size: 16px; }
.order-items-table tfoot .discount td { color: var(--success); }
.bundle-includes { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.status-paid { color: var(--success); font-weight: 600; }
.status-pending { color: #ffc107; font-weight: 600; }
.status-failed { color: var(--danger); font-weight: 600; }
.variant-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.variant-a { background: #dbeafe; color: #1e40af; }
.variant-b { background: #fce7f3; color: #9d174d; }
.access-info { margin-top: 30px; }
.access-info h2 { margin-bottom: 16px; }
.access-item { background: var(--card); padding: 20px; border-radius: var(--radius); margin-bottom: 12px; border: 1px solid var(--border); }
.access-item h3 { margin-bottom: 8px; }
/* Footer */
.footer { text-align: center; padding: 40px 0 30px; color: var(--text-light); font-size: 13px; border-top: 1px solid var(--border); margin-top: 0; }
.footer-legal { margin-top: 6px; }
.footer-legal a { color: var(--text-light); text-decoration: underline; }
.footer-legal a:hover { color: var(--gold); }
.footer-sep { margin: 0 8px; }
/* Buy Now button on grid */
.buy-now-grid-btn { display: block; margin: 0 16px 16px; text-align: center; }
/* Product Short Description */
.product-short-desc { margin-top: 12px; color: var(--text-light); line-height: 1.6; }
/* Copy Bullets */
.product-bullets {
list-style: none;
margin: 20px 0;
padding: 0;
}
.product-bullets li {
padding: 8px 0 8px 28px;
position: relative;
font-size: 15px;
line-height: 1.5;
}
.product-bullets li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--gold);
font-weight: 700;
}
/* Buy Now */
.buy-now-form { margin-top: 24px; }
.btn-buy-now { text-align: center; }
/* Copy Modules (alternating text/image) */
.copy-modules { padding: 40px 0; }
.copy-module-text p:last-child { margin-bottom: 0; }
/* Full Description */
.product-full-description { padding: 40px 0; border-top: 1px solid var(--border); }
.description-content { max-width: 800px; margin: 0 auto; line-height: 1.8; font-size: 15px; }
.description-content p { margin-bottom: 14px; }
.description-content p:last-child { margin-bottom: 0; }
/* FAQs */
.product-faqs { padding: 40px 0; border-top: 1px solid var(--border); }
.product-faqs > h2 { text-align: center; font-size: 28px; margin-bottom: 24px; }
.faq-list { max-width: 700px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
background: none;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
text-align: left;
color: var(--white);
}
.faq-toggle { font-size: 20px; color: var(--text-light); transition: transform 0.2s; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer p { padding: 0 0 18px; line-height: 1.7; color: var(--text-light); }
/* Reviews */
.product-reviews { padding: 40px 0; border-top: 1px solid var(--border); }
.product-reviews > h2 { text-align: center; font-size: 28px; margin-bottom: 24px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.review-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.review-stars { color: #f5a623; font-size: 16px; margin-bottom: 10px; }
.review-stars.small { font-size: 13px; }
.review-text { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
.review-author { font-size: 13px; color: var(--text-light); }
.review-name { font-weight: 600; color: var(--text); }
.review-product { margin-left: 4px; }
/* Checkout Page */
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px; padding: 30px 0 60px; }
.checkout-left h1 { margin-bottom: 24px; }
.checkout-left h2 { font-size: 18px; margin: 24px 0 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.checkout-left h2:first-of-type { border-top: none; padding-top: 0; }
.checkout-form-full .form-group input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 15px;
background: var(--primary);
color: var(--white);
}
.checkout-form-full .form-group input::placeholder { color: var(--text-light); }
.form-row-checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.btn-place-order { width: 100%; text-align: center; margin-top: 20px; font-size: 16px; padding: 16px; }
/* Checkout countdown (SALES-3) */
.checkout-timer {
background: rgba(211, 165, 110, 0.12);
border: 1px solid var(--gold);
color: var(--gold);
border-radius: var(--radius);
padding: 10px 16px;
font-size: 14px;
margin-bottom: 18px;
text-align: center;
}
/* Product tile review stars */
.tile-stars { color: var(--gold); font-size: 13px; margin: 2px 0 6px; letter-spacing: 1px; }
.tile-stars-count { color: var(--text-light); font-size: 12px; letter-spacing: 0; margin-left: 4px; }
/* Social-proof toasts */
.sp-toast {
position: fixed; left: 16px; bottom: 16px; z-index: 900;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
color: var(--text); font-size: 13px; padding: 12px 16px;
box-shadow: 0 6px 24px rgba(0,0,0,0.35);
opacity: 0; transform: translateY(12px); transition: all 0.35s ease;
max-width: 300px;
}
.sp-toast.sp-toast-in { opacity: 1; transform: translateY(0); }
.sp-toast strong { color: var(--white); }
.sp-toast-time { display: block; color: var(--text-light); font-size: 11px; margin-top: 3px; }
/* Exit-intent popup */
.exit-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1100;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.exit-box {
position: relative; background: var(--card); border: 1px solid var(--border);
border-radius: 12px; padding: 36px; max-width: 420px; width: 100%; text-align: center;
}
.exit-box h2 { color: var(--white); font-size: 24px; margin-bottom: 10px; }
.exit-box p { color: var(--text); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.exit-close {
position: absolute; top: 10px; right: 14px; background: none; border: none;
color: var(--text-light); font-size: 26px; cursor: pointer;
}
.exit-form { display: flex; gap: 8px; }
.exit-form input {
flex: 1; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
background: var(--primary); color: var(--white); font-size: 14px;
}
.exit-result { color: var(--gold) !important; font-weight: 600; }
/* Hero CTA row (Buy Now + Add to Cart) */
.hero-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-add-cart { padding: 15px 24px; font-size: 15px; }
/* Order bumps */
.order-bumps { margin: 20px 0 8px; display: flex; flex-direction: column; gap: 10px; }
.order-bump { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px dashed var(--gold); border-radius: var(--radius); background: var(--card); cursor: pointer; }
.order-bump input { width: 18px; height: 18px; flex-shrink: 0; }
.order-bump-body { display: flex; flex-direction: column; gap: 2px; }
.order-bump-headline { font-weight: 600; color: var(--white); font-size: 14px; }
.order-bump-price { font-size: 13px; color: var(--gold); }
.checkout-secure-note { font-size: 13px; color: var(--text-light); margin-top: 14px; }
/* Checkout Summary */
.checkout-summary {
background: var(--color_surface_default);
border: 1px solid var(--color_surface_border);
border-radius: var(--radius);
padding: 24px;
position: sticky;
top: 80px;
}
.checkout-product { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.checkout-product-img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.checkout-product-name { font-weight: 600; }
.checkout-product-price { color: var(--text-light); font-size: 14px; }
.checkout-product-qty input {
width: 56px; padding: 4px 6px; border: 1px solid var(--border);
border-radius: 4px; text-align: center; font-size: 13px;
}
.summary-lines { margin-top: 16px; }
.checkout-reviews { margin-top: 20px; }
.checkout-review {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 12px;
}
.checkout-review p { font-size: 13px; line-height: 1.5; margin: 6px 0; }
.checkout-review .review-name { font-size: 12px; color: var(--text-light); font-weight: 600; }
/* Modal */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-box {
background: var(--card);
border-radius: 12px;
padding: 40px;
max-width: 420px;
text-align: center;
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
border: 1px solid var(--border);
}
.modal-box h2 { font-size: 24px; margin-bottom: 12px; color: var(--white); }
.modal-box p { color: var(--text-light); margin-bottom: 24px; line-height: 1.5; }
/* Nav logo */
.nav-logo { max-height: 40px; width: auto; display: block; }
.navbar-minimal .container { justify-content: center; }
/* Section heading */
.section-heading { text-align: center; font-size: 28px; font-weight: 800; margin-bottom: 32px; color: var(--white); }
/* Bullets section */
.bullets-section { padding: 60px 0; }
.bullets-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 40px;
list-style: none;
max-width: 820px;
margin: 0 auto;
}
.bullet-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; }
.bullet-icon { font-size: 18px; color: var(--gold); flex-shrink: 0; line-height: 1.5; }
/* What's included (bundle components) */
.bundle-included { padding: 60px 0; }
.bundle-included-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 40px;
list-style: none;
max-width: 820px;
margin: 0 auto;
}
.bundle-included-item { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.bundle-included-thumb { width: 150px; height: 150px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
@media (max-width: 700px) {
.bundle-included-list { grid-template-columns: 1fr; }
}
/* Product summary card */
.product-summary-section { padding: 60px 0; background: var(--primary); }
.product-summary-card {
background: var(--color_surface_default);
border-radius: 16px;
padding: 40px;
max-width: 560px;
margin: 0 auto;
text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
border: 1px solid var(--color_surface_border);
/* Positioned ancestor for .summary-badge (position: absolute). Without
this, a lone card (no .summary-cards-grid wrapper, which sets this
redundantly) leaves the badge escaping to the next positioned
ancestor up the tree instead of sitting on the card. */
position: relative;
}
.summary-card-title { font-size: 30px; line-height: 1.4; font-weight: 800; margin: 20px 0 24px; color: white; }
.summary-features { list-style: none; text-align: left; margin-bottom: 24px; }
.summary-features li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 15px; }
.summary-check { color: var(--gold); font-weight: 700; flex-shrink: 0; }
.summary-price { font-size: 36px; font-weight: 800; color: var(--white); margin-bottom: 20px; display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.price-compare-summary { font-size: 20px; color: var(--text-light); text-decoration: line-through; font-weight: 500; }
.btn-summary { display: block; width: 100%; text-align: center;
display: inline-block;
/* White at rest, gold on hover — matching the hero button, and reading as
the primary action against the tier's translucent card. */
background: #fff;
color: #1B0E3D;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 16px 48px;
font-size: 18px;
font-weight: 700;
border-radius: var(--radius);
border: none;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
}
.btn-summary:hover { transform: translateY(-1px); }
.summary-guarantee { margin-top: 16px; font-size: 14px; color: var(--text-light); }
.guarantee-icon { margin-right: 4px; }
/* Guarantee banner */
.guarantee-section { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; }
.guarantee-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.guarantee-badge { font-size: 48px; }
.guarantee-inner h3 { font-size: 20px; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.guarantee-inner p { color: var(--text); font-size: 15px; opacity: 0.85; max-width: 500px; }
/* Responsive */
@media (max-width: 768px) {
.shop-layout { grid-template-columns: 1fr; }
.shop-filters { display: block; }
/* On a phone the filter list pushed the products most of a screen down, so
it collapses to a single row you can open. */
.shop-filters-collapse {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0 14px;
margin-bottom: 18px;
}
.shop-filters-collapse > summary {
cursor: pointer;
padding: 13px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
}
.shop-filters-collapse > summary h3 { margin: 0; }
.shop-filters-collapse > summary::after {
content: 'Show';
font-size: 13px;
font-weight: 500;
color: var(--gold);
}
.shop-filters-collapse[open] > summary::after { content: 'Hide'; }
.shop-filters-collapse[open] { padding-bottom: 14px; }
.shop-filters-collapse > *:not(summary) { margin-top: 4px; }
.filter-group { margin-bottom: 0; }
.cart-layout { grid-template-columns: 1fr; }
.cart-summary { position: static; }
.product-hero-inner { grid-template-columns: 1fr; }
.product-hero-info h1 { font-size: 26px; }
.cta-bottom-inner { flex-direction: column; align-items: flex-start; }
.copy-module { grid-template-columns: 1fr; }
.checkout-layout { grid-template-columns: 1fr; }
.checkout-summary { position: static; }
.bullets-grid { grid-template-columns: 1fr; }
.guarantee-inner { flex-direction: column; text-align: center; }
}
/* ─── Unified checkout (screenshot layout) ─────────────────────────── */
.checkout-card {
background: var(--color_surface_default);
border: 1px solid var(--color_surface_border);
border-radius: 12px; padding: 32px;
}
.checkout-heading {
font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
color: var(--white); margin: 26px 0 14px; border: none; padding: 0;
}
.checkout-known-email { color: var(--text); font-size: 14px; margin-bottom: 6px; }
.linklike {
background: none; border: none; color: var(--text-light); cursor: pointer;
text-decoration: underline; font-size: 13px; padding: 0; margin-left: 8px;
}
.linklike.small { font-size: 11px; margin-left: 0; }
.checkout-card .form-group { margin-bottom: 14px; }
.checkout-card .form-group label { display: block; font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
.checkout-card .form-group input, .checkout-card .form-group select {
width: 100%; padding: 12px 14px;
border: 1px solid var(--color_surface_border);
border-radius: var(--radius); font-size: 15px;
/* Stacked on the card's own translucency, so fields read as slightly
raised out of the panel rather than as dark cut-outs. */
background: var(--color_surface_raised); color: var(--white);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Bump offer cards ("Exclusive Discounts") */
.bump-card {
border: 1px solid var(--color_surface_border); border-radius: 10px;
padding: 18px; margin-bottom: 16px;
background: var(--color_surface_default);
}
.bump-card-main { display: flex; gap: 16px; }
.bump-card-img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.bump-card-name { font-weight: 700; color: var(--white); font-size: 16px; }
.bump-card-price { margin: 4px 0 8px; }
.price-now { color: var(--gold); font-weight: 600; }
.price-was { color: var(--text-light); margin-left: 8px; }
.bump-card-desc { font-size: 14px; color: var(--text); line-height: 1.4; }
.bump-add-form { margin-top: 14px; padding-top: 14px; }
.btn-bump-add {
width: 100%; background: var(--gold); color: #fff; font-weight: 700;
letter-spacing: 1px; border: none; border-radius: 8px; padding: 14px;
font-size: 17px; cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.btn-bump-add:hover { background: #4A9E6B; color: #fff; filter: none; }
/* Checkout countdown — a pure urgency message (CHECKOUT_TIMER_MINUTES admin
setting, "0 = off"): nothing functionally changes at zero, the row just
disappears (banner.js removes .checkout-timer itself, the same
.banner-countdown[data-countdown] contract as the top banner and the
product-page sale promo box). MM:SS only, so no tile grid like
.sale-promo-countdown's — just an icon + inline "mm:ss" in a slim highlight
row above Card Details. */
.checkout-timer {
display: flex; align-items: center; justify-content: center; gap: 6px;
background: #755b90; color: var(--white);
border-radius: var(--radius); padding: 10px 16px;
margin: 26px 0 4px;
font-size: 14px; font-weight: 600; text-align: center;
font-variant-numeric: tabular-nums;
}
.checkout-timer [data-cd] { font-weight: 800; }
/* Discount + order summary blocks */
.coupon-block { margin: 22px 0 10px; }
.coupon-block label { display: block; font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
.summary-block { margin-top: 18px; }
.summary-head {
display: flex; justify-content: space-between; font-size: 12px;
color: var(--text-light); padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.summary-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 12px 0; font-size: 14px; }
.summary-item + .summary-item { border-top: 1px solid rgba(255,255,255,0.05); }
.summary-item > span:first-child { flex: 1; min-width: 0; line-height: 1.45; }
.summary-item-price { flex-shrink: 0; white-space: nowrap; text-align: right; }
.summary-item-price .price-was { margin-left: 8px; }
/* Pay button + trust row */
.btn-pay {
display: block; width: 100%; background: #fff; color: #1c1440;
font-weight: 700; letter-spacing: 1px; font-size: 15px;
border: none; border-radius: 8px; padding: 17px; margin-top: 20px; cursor: pointer;
}
.btn-pay:hover { background: #f1eefc; }
.trust-row { display: flex; justify-content: center; gap: 60px; margin: 26px 0 8px; text-align: center; }
.trust-item { color: var(--white); font-size: 14px; }
.trust-icon { display: block; font-size: 26px; margin-bottom: 8px; }
.checkout-support { text-align: center; color: var(--text-light); font-size: 13px; margin-top: 18px; }
/* Testimonial under the card */
.checkout-testimonial { display: flex; gap: 18px; align-items: center; margin: 28px 10px 0; }
.testimonial-avatar {
width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
background: var(--card); border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--gold); font-size: 24px; font-weight: 700;
}
.testimonial-text { font-size: 15px; line-height: 1.6; color: var(--text); }
.testimonial-name { font-weight: 700; color: var(--white); margin-top: 8px; font-size: 14px; }
/* Right-hand cart panel */
.summary-sep { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.checkout-product { position: relative; }
.checkout-product-pricing { margin-left: auto; text-align: right; font-size: 14px; }
.checkout-product-pricing form { margin-top: 2px; }
.checkout-product-meta { flex: 1; }
/* Cart add-on (order-bump) rows */
.cart-item-bump .cart-item-info h3 { display: flex; align-items: center; gap: 8px; }
.cart-bump-tag {
font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 1px 7px;
}
.cart-item-bump .cart-item-price s { color: var(--text-light); margin-left: 6px; }
/* Currency switcher */
.currency-switcher .currency-toggle { cursor: pointer; }
.currency-switcher .nav-sub a.active { color: var(--gold); font-weight: 600; }
/* Checkout section heading row (heading left, currency far right) */
.checkout-heading-row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin: 26px 0 14px;
}
.checkout-heading-row .checkout-heading { margin: 0; }
.checkout-card form > .checkout-heading-row:first-of-type { margin-top: 0; }
.currency-select-inline {
flex-shrink: 0;
background: var(--color_surface_raised); color: var(--white); font-size: 13px;
border: 1px solid var(--color_surface_border); border-radius: var(--radius);
padding: 7px 10px;
}
/* Stripe Elements (embedded payment + address) */
#payment-element, #address-element, #express-checkout-element { margin: 6px 0 14px; }
#address-element { margin-bottom: 20px; }
#payment-error { margin: -6px 0 12px; }
.btn-pay:disabled { opacity: 0.55; cursor: not-allowed; }
/* ══════════════════════════════════════════════════════════════════════
Product page — sales-page design
Deep navy base, purple hero + module panels, display-serif headings.
Rules below intentionally override the older product styles above.
══════════════════════════════════════════════════════════════════════ */
:root {
--navy: #1B0E3D;
--navy-deep: #150A32;
--hero-purple-a: #4C3A7C;
--hero-purple-b: #3B2A66;
--panel-purple: #7A6AA6;
/* Featured image + gallery thumbs share the product photography ratio */
--hero-ratio: 573 / 429;
/* System type only — nothing is downloaded. The display face keeps a serif
so the heading hierarchy survives; it just uses one already installed. */
--font-display: Georgia, Cambria, 'Times New Roman', Times, serif;
--font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-h2: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* Body copy shares the h2 face — three brand faces, not four. */
--font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* ── One heading scale for the whole site ──────────────────────────────
h1 is Manier Heavy at 32px and h2 is Gotham Medium, matched by the same
two rules in admin-core.css and the events stylesheet. Both faces are
uploaded at /admin/branding; with nothing uploaded the vars above keep
the previous system serif / sans.
The sales pages opt out with body.sales-page — their hero and section
type is tuned per layout and is not part of this scale. */
body:not(.sales-page) h1 {
font-family: var(--font-display);
font-size: 32px;
line-height: 1.2;
}
body:not(.sales-page) h2 {
font-family: var(--font-h2);
font-size: 24px;
font-weight: 500;
letter-spacing: normal;
}
/* Display serif for every section/product heading */
h1, h2, h3,
.product-hero-info h1,
.section-heading,
.copy-module-text h2,
.summary-card-title,
.checkout-heading,
.reviews-score {
font-family: var(--font-display);
font-weight: 900;
letter-spacing: normal;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
}
/* FAQ questions are body copy in a button, not headings — keep them on Gotham. */
.faq-question { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0; }
/* ── Sticky product bar ───────────────────────────────────────────── */
.navbar-minimal .container { position: relative; }
.nav-sale {
position: absolute; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 8px;
font-size: 14px; letter-spacing: 0.4px; white-space: nowrap;
}
.nav-sale-label { color: var(--white); font-weight: 600; text-transform: uppercase; }
.nav-sale-price { color: var(--gold); font-weight: 700; }
.nav-sale-was { color: var(--text-light); }
.nav-sale-subtext { color: var(--text-light); font-weight: 500; text-transform: none; }
.btn-nav-buy {
margin-left: auto; background: #fff; color: #1B0E3D;
font-weight: 700; letter-spacing: 1px; font-size: 13px;
padding: 12px 26px; border-radius: 6px;
}
.btn-nav-buy:hover { background: #efeaff; }
/* ── Hero ─────────────────────────────────────────────────────────── */
.product-hero {
background: var(--hero-bg, radial-gradient(ellipse farthest-corner at 0% 0%,
rgba(44,19,95,1) 0%, #160B35 100%));
padding: 30px 0 50px;
}
.product-hero-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
max-width: 1200px;
margin: 0 auto;
}
.product-hero-image img {
width: 100%; aspect-ratio: var(--hero-ratio); object-fit: cover;
border-radius: 10px; box-shadow: none; display: block;
}
.product-hero-media .product-image-placeholder.large {
width: 100%; height: auto; aspect-ratio: var(--hero-ratio); border-radius: 10px;
}
.product-hero-video {
position: relative; width: 100%; aspect-ratio: 16/9;
border-radius: 10px; overflow: hidden;
}
.product-hero-video iframe {
width: 100%; height: 100%; border: 0; display: block;
}
/* One row regardless of count — --thumb-count (set inline from the actual
gallery length, same pattern as .summary-cards' --tier-count) sizes each
thumbnail down to fit rather than wrapping to a second row past 3. */
.product-thumbs { display: grid; grid-template-columns: repeat(var(--thumb-count, 3), 1fr); gap: 16px; margin-top: 16px; }
.product-thumb {
padding: 0; border: none; background: none; cursor: pointer;
border-radius: 8px; overflow: hidden; line-height: 0;
}
.product-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.product-hero-info h1 {
font-size: 34px; line-height: 1.2; color: var(--white); font-weight: 900;
margin-bottom: 14px;
}
.product-short-desc-hero { color: #DCD3EC; font-size: 18px; line-height: 1.3; margin-bottom: 16px; padding: 0px; }
.hero-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-sale-label { color: var(--white); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.4px; }
.price-current-hero { color: var(--gold); font-size: 17px; font-weight: 700; }
.price-compare-hero { color: #B7ACCD; font-size: 16px; }
.hero-off-badge {
color: var(--gold); border: 1px solid var(--gold); border-radius: 999px;
padding: 2px 11px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}
.hero-rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.rating-avatars { display: flex; }
.rating-avatars img {
width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
margin-right: -8px; border: 2px solid var(--hero-purple-a);
}
.rating-score { font-size: 19px; font-weight: 700; color: var(--white); margin-left: 10px; }
.rating-stars { color: var(--gold); letter-spacing: 1px; font-size: 15px; }
.rating-count { color: #B7ACCD; font-size: 13px; }
.btn-hero {
display: block; width: 100%; text-align: center; text-transform: none;
letter-spacing: 0;
background: #fff; color: #1B0E3D; font-weight: 700; font-size: 16px;
padding: 17px; border-radius: 8px; margin-bottom: 16px;
}
/* Kept in the markup (see product.html) but hidden at every width — the
mobile hero now leads with the featured image and asks once, with the
single .btn-hero button. */
.btn-hero-repeat { display: none; }
.hero-pay-row { display: flex; justify-content: center; margin-bottom: 6px; }
.hero-pay-icons { max-height: 35px; width: auto; }
.hero-refund { text-align: center; color: #DCD3EC; font-size: 13px; font-style: italic; margin-bottom: 12px; }
.hero-availability { text-align: center; color: #DCD3EC; font-size: 13px; margin-bottom: 20px; }
.in-stock { color: var(--white); font-weight: 600; }
.hero-blurb p { color: #DCD3EC; font-size: 16px; line-height: 1.4; margin-bottom: 12px; }
.hero-blurb strong { color: var(--white); }
.hero-testimonial { display: flex; gap: 24px; align-items: center; margin-top: 26px; }
.hero-testimonial-avatar {
width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0;
object-fit: cover; display: block;
}
.hero-testimonial-initial {
background: rgba(255,255,255,0.12); color: var(--white);
display: inline-flex; align-items: center; justify-content: center;
font-size: 40px; font-weight: 700;
}
.hero-testimonial-text {
color: #EDE7F7; font-size: 17px; line-height: 1.45; font-style: italic;
}
.hero-testimonial-name { color: #DCD3EC; font-size: 15px; margin-top: 12px; }
/* ── Section headings ─────────────────────────────────────────────── */
.section-heading {
text-align: center; color: var(--white); font-size: 45px; font-weight: 800;
line-height: 1.25; margin: 0 auto 44px; max-width: 760px;
}
/* ── Copy modules (alternating purple panels) ─────────────────────── */
.copy-modules { background: var(--hero-purple-b); padding: 72px 0 80px; }
.copy-modules .container { max-width: 1180px; }
.copy-module {
display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
background: var(--panel-purple); border-radius: 4px; overflow: hidden;
margin-bottom: 56px;
}
.copy-module:last-child { margin-bottom: 0; }
.copy-module-text { padding: 40px; align-self: center; }
.copy-module-text h2 {
color: var(--white); font-size: 32px; font-weight: 800; margin-bottom: 18px;
}
.copy-module-text p { color: #F1ECF9; font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
.copy-module-image { position: relative; align-self: stretch; }
.copy-module-image img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.module-text-right .copy-module-text { order: 2; }
.module-text-right .copy-module-image { order: 1; }
/* ── Bullets ─────────────────────────────────────────────────────── */
.bullets-section { background: var(--navy); padding: 72px 0; }
.bullets-grid { max-width: 860px; margin: 0 auto; list-style: none; display: grid; gap: 14px; }
.bullet-item { display: flex; gap: 12px; color: #DCD3EC; font-size: 15px; line-height: 1.55; }
.bullet-icon { color: var(--gold); }
/* ── Reviews ─────────────────────────────────────────────────────── */
.product-reviews { background: var(--navy-deep); padding: 76px 0; }
.product-reviews .container { max-width: 760px; }
.reviews-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.reviews-score { font-size: 34px; font-weight: 800; color: var(--white); }
.reviews-stars { color: var(--gold); font-size: 24px; letter-spacing: 2px; }
.reviews-count { color: var(--text-light); font-size: 12px; }
.reviews-list { display: block; }
.review-row { padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.09); }
.review-row:first-child { border-top: none; }
.review-hidden { display: none; }
.review-row-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.review-row .review-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.review-row .review-name { color: var(--white); font-weight: 600; font-size: 14px; }
.review-date { margin-left: auto; color: var(--text-light); font-size: 11px; }
.review-row .review-text { color: #DCD3EC; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.reviews-more {
display: block; margin: 26px auto 0; background: none; border: none;
color: var(--white); font-size: 14px; text-decoration: underline; cursor: pointer;
}
/* ── FAQs ────────────────────────────────────────────────────────── */
.product-faqs { background: var(--navy-deep); padding: 76px 0 90px; }
.product-faqs .container { max-width: 700px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: transparent; border: none; }
.faq-question {
width: 100%; display: flex; justify-content: space-between; align-items: center;
gap: 16px; background: var(--panel-purple); color: var(--white);
border: none; border-radius: 6px; padding: 15px 20px;
font-size: 14px; text-align: left; cursor: pointer;
}
.faq-question:hover { filter: brightness(1.06); }
.faq-toggle { font-size: 13px; opacity: 0.85; transition: transform 0.2s; }
.faq-item.open .faq-toggle { transform: rotate(180deg); }
.faq-answer { display: none; padding: 16px 20px 4px; }
.faq-item.open .faq-answer { display: block; }
.faq-answer p { color: #DCD3EC; font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
/* ── Closing summary card ────────────────────────────────────────── */
/* Same gradient as the hero, so the packages read as part of the page rather
than a band laid over it. */
.product-summary-section {
background: var(--hero-bg, radial-gradient(ellipse farthest-corner at 0% 0%,
rgba(44,19,95,1) 0%, #160B35 100%));
padding: 72px 0 96px;
}
.product-summary-mid { padding: 64px 0; }
.summary-card-title { font-size: 30px; line-height: 1.4; font-weight: 800; color: white; }
@media (max-width: 900px) {
/* Single column, and the featured image moves to the very top, above the
title. `display: contents` on `.product-hero-info` lifts the info
column's children into the same flex flow so `order` can interleave
them with the media block. `.product-hero-media` gets the same
treatment so its own two children — the featured image and the
gallery thumbnails — can be ordered independently too: the image
leads the page, the thumbnails land at the very bottom, well apart
from each other in the reference design. */
/* Tighter than desktop: on a phone the generous vertical rhythm pushed the
CTA well below the fold with a lot of dead space above it. */
.product-hero { padding: 28px 0 32px; }
.product-hero-inner { display: flex; flex-direction: column; gap: 10px; }
.product-hero-info { display: contents; }
.product-hero-media { display: contents; }
/* `align-items: start` on `.product-hero-inner` (inherited from the
desktop grid rule, kept deliberately — see the comment on
.hero-pay-row/.hero-refund/.hero-availability below) sizes a flex item
to shrink-to-fit rather than stretching it. A real ![]()
or a gallery
thumb happens to end up full width anyway, because its intrinsic size
exceeds the viewport and gets clamped down — but an empty element (the
"no image" placeholder div, or a video embed with no img content) has
no intrinsic size to clamp and collapses to 0. `align-self: stretch`
opts both back into the container's full width unconditionally rather
than depending on that coincidence. */
.product-hero-image { order: 1; align-self: stretch; }
.product-thumbs { align-self: stretch; }
.product-hero-info h1 { order: 2; }
.product-short-desc-hero { order: 3; }
.hero-price-row { order: 4; }
.hero-rating-row { order: 5; }
/* Right after price + rating, right before the Buy Now button — matches
the mobile reference design, which shows the promo box much earlier
than desktop (where it stays in its natural DOM position, after the
full description — see .sale-promo-box's placement in product.html). */
.sale-promo-box { order: 6; }
.btn-hero { order: 7; margin-bottom: 0; }
.hero-pay-row { order: 8; }
/* Availability before refund on the phone — the reverse of desktop's
reading order, but it's what the reference design shows. */
.hero-availability { order: 9; }
.hero-refund { order: 10; }
.hero-blurb { order: 11; }
.hero-testimonial { order: 12; }
.product-thumbs { order: 13; }
.product-hero-info h1 { font-size: 27px; line-height: 1.2; }
.product-short-desc-hero { font-size: 15px; line-height: 1.5; margin: 0; }
.hero-price-row { margin: 2px 0; flex-wrap: wrap; row-gap: 6px; }
.hero-rating-row { margin: 0; flex-wrap: wrap; row-gap: 6px; }
/* The 10px flex gap above already provides the spacing after the rating
row — the desktop 20px margin-top (right after the long description
there) would be too much here. */
.sale-promo-box { margin: 10px 0px 10px 0px; }
.btn-hero { margin-top: 4px; margin-bottom: 8px; }
/* The phone hero packs its children to the start, which shrinks these to
their content and strands them at the left edge — they carry their own
centring, they just need the width to use it. */
.hero-pay-row,
.hero-refund,
.hero-availability { align-self: stretch; }
.hero-pay-row { margin: 10px 0 0; }
.hero-refund, .hero-availability { margin: 6px 0 0; font-size: 13px; }
.hero-blurb { margin-top: 8px; }
.hero-testimonial { margin-top: 8px; margin-bottom: 8px; }
.section-heading { font-size: 30px; margin-bottom: 32px; }
.copy-module { grid-template-columns: 1fr; }
.module-text-right .copy-module-text { order: 0; }
.module-text-right .copy-module-image { order: 0; }
.copy-module-text { padding: 28px; }
/* Stacked, the image column has no height to fill — the absolutely
positioned img collapsed to nothing. Let it flow instead. */
.copy-module-image { position: static; }
.copy-module-image img {
position: static; height: auto; width: 100%;
aspect-ratio: 16 / 10; display: block;
}
.nav-sale { display: none; }
}
/* Bonuses — darker ground, narrower boxes. The container stays wide so the
section heading still spans the full width; only the panels are constrained. */
.bonus-modules { background: var(--navy-deep); }
.bonus-modules .copy-module {
background: #3A2A66;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Admin "Stripe test mode" warning bar */
.test-mode-bar {
background: #b8860b; color: #fff; text-align: center;
padding: 8px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
}
.test-mode-bar a { color: #fff; text-decoration: underline; margin-left: 10px; }
/* Case studies — module geometry, sits after the reviews */
.case-modules { background: var(--hero-purple-b); }
.case-modules .copy-module { background: var(--panel-purple); }
/* A module/bonus/case panel can hold a video instead of an image */
/* A module's media column stretches to the height of the text beside it, so
whatever goes in here fills that box rather than setting its own shape.
The last selector is the one that matters for a player element like
Wistia's : it is neither iframe nor video, so without it the
player fell outside the stretched box entirely. */
.copy-module-video { background: #000; }
.copy-module-video iframe,
.copy-module-video video,
.copy-module-video > *:not(script):not(style) {
position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0;
}
/* Customer photos attached to reviews */
.reviews-sort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text-light); }
.reviews-sort select {
background: var(--panel, rgba(255,255,255,0.06)); color: var(--white);
border: 1px solid var(--border); border-radius: 6px;
padding: 7px 10px; font: inherit; font-size: 13px;
}
/* The shop's answer, indented under the review it answers. */
.review-reply {
margin: 14px 0 0 0;
padding: 14px 16px;
border-left: 3px solid var(--gold);
background: rgba(255, 255, 255, 0.04);
border-radius: 0 8px 8px 0;
}
.review-reply-head {
margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--gold);
}
.review-reply-date { color: var(--text-light); font-weight: 400; margin-left: 8px; }
.review-reply-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.review-photo {
display: inline-block; margin-top: 10px; line-height: 0;
padding: 0; border: none; background: none; cursor: zoom-in;
}
.review-photo img {
width: 92px; height: 92px; object-fit: cover;
border-radius: 8px; border: 1px solid var(--border);
}
/* Full-size image viewer */
.lightbox {
position: fixed; inset: 0; z-index: 1200;
background: rgba(8, 4, 20, 0.92);
display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
max-width: min(1100px, 100%); max-height: 100%;
width: auto; height: auto; object-fit: contain; border-radius: 8px;
}
.lightbox-close {
position: absolute; top: 18px; right: 22px;
background: none; border: none; color: #fff; font-size: 40px; line-height: 1;
cursor: pointer; padding: 4px 12px; border-radius: 6px;
}
.lightbox-close:hover { background: rgba(255,255,255,0.12); }
.zoomable { cursor: zoom-in; }
/* Currency picker at the foot of the product page (the nav is minimal here) */
.product-currency { background: var(--navy-deep); padding: 34px 0 40px; text-align: center; }
.product-currency label { display: block; color: var(--text-light); font-size: 12px; margin-bottom: 10px; }
.product-currency select {
background: var(--primary); color: var(--white); font-size: 14px;
border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 14px;
}
.product-currency-note { color: var(--text-light); font-size: 12px; margin-top: 12px; }
/* Upsell lines on the receipt — bought through the funnel, so labelled to
explain why they weren't on the checkout page. */
.upsell-tag {
display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--gold); border: 1px solid var(--gold);
border-radius: 999px; padding: 1px 8px; vertical-align: middle;
}
/* ── Packages ────────────────────────────────────────────────────────────
One package renders the buy card on its own; several render the same card
side by side, so a product gains tiers without changing how the offer looks. */
.summary-cards-grid {
/* An explicit column per tier, not auto-fit: auto-fit wrapped three tiers
into a 2 + 1 orphan row at tablet widths, which looked broken. Tiers stay
on one row until the breakpoint below drops them all to one column. */
display: grid;
/* Cap each box at 450px and centre the row, so two tiers don't stretch
into slabs on a wide screen. */
grid-template-columns: repeat(var(--tier-count, 3), minmax(0, 450px));
justify-content: center;
gap: 22px; align-items: stretch; max-width: 1180px; margin: 0 auto;
padding-top: 14px; /* room for a badge sitting above the card edge */
}
/* In a grid the card fills its column and its button drops to a shared
baseline, so uneven feature lists still leave the row aligned. */
.summary-cards-grid .product-summary-card {
max-width: none; margin: 0; padding: 32px 26px 26px;
display: flex; flex-direction: column; position: relative;
}
.summary-cards-grid .summary-features { flex: 1 0 auto; }
/* The highlighted tier has to read at a glance without growing — growing would
break the row's alignment. Lift it instead: gold rule, warmer ground, glow. */
.summary-card-featured {
border: 2px solid var(--gold);
/* Gold wash over the same translucent surface, so the highlighted tier
still sits on the gradient like its neighbours. */
background: linear-gradient(180deg, rgba(211,165,110,0.16), rgba(211,165,110,0.05)),
var(--color_surface_default);
box-shadow: 0 0 0 4px rgba(211,165,110,0.10), 0 14px 40px rgba(0,0,0,0.5);
}
/* Requested: title stays white even in the highlighted/featured state. Note
the featured card's background is a light gold wash, so white-on-light
here is a contrast/readability regression versus the previous gold text —
flagged per the task, kept as requested. */
.summary-card-featured .summary-card-title { color: white; }
.summary-badge {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--gold); color: #1B0E3D; font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.08em;
padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
/* Below this the columns get too narrow to read, so go to a single column —
centred, capped, and with real breathing room down the sides. */
@media (max-width: 1000px) {
.summary-cards-grid {
grid-template-columns: minmax(0, 450px);
max-width: 450px; gap: 26px; padding: 14px 8px 0;
}
.summary-cards-grid .product-summary-card { padding: 30px 24px 24px; }
}
@media (max-width: 560px) {
.summary-cards-grid { padding: 14px 4px 0; gap: 22px; }
.summary-cards-grid .product-summary-card { padding: 26px 20px 22px; }
}
}
/* Package image — sits above the tier title, cropped so uneven source images
don't make the cards different heights. */
.summary-card-image {
width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
border-radius: 10px; display: block;
/* No bottom margin: the title's own top margin sets the gap, so an image
above it doesn't double the spacing. */
}
/* The top CTAs jump to the packages table when there is a choice to make.
Sticky nav would otherwise cover the first card's badge and heading. */
html { scroll-behavior: smooth; }
.product-summary-section[id] { scroll-margin-top: 90px; }
/* ── Closing call to action ──────────────────────────────────────────────
A light band at the foot of the page: one wide button, flanked by tilted
photos. Deliberately the only thing on it — by this point the reading is
done and the button just sends them back up to the packages. */
.closing-cta {
background: #F7F7FA;
/* Faint graph-paper grid, drawn rather than shipped as an image. */
background-image:
linear-gradient(to right, rgba(22,11,53,0.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(22,11,53,0.055) 1px, transparent 1px);
background-size: 88px 88px;
padding: 72px 20px;
overflow: hidden;
}
.closing-cta-inner {
max-width: 1400px; margin: 0 auto;
display: flex; align-items: center; justify-content: center; gap: 40px;
}
.btn-closing-cta {
flex: 0 1 820px;
display: block; text-align: center; text-decoration: none;
padding: 26px 40px; border-radius: 999px;
background: linear-gradient(100deg, #C9A06E 0%, #E4C79B 45%, #C9A06E 100%);
color: #160B35; font-size: 20px; font-weight: 700;
box-shadow: 0 0 0 8px rgba(255,255,255,0.9), 0 14px 34px rgba(22,11,53,0.16);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-closing-cta:hover {
color: #160B35; transform: translateY(-2px);
box-shadow: 0 0 0 8px rgba(255,255,255,0.95), 0 18px 40px rgba(22,11,53,0.22);
}
.closing-cta-photo {
width: 210px; aspect-ratio: 1 / 1; object-fit: cover; flex: none;
border-radius: 14px; border: 7px solid #fff;
box-shadow: 0 12px 30px rgba(22,11,53,0.18);
}
.closing-cta-photo-left { transform: rotate(-8deg); }
.closing-cta-photo-right { transform: rotate(7deg); }
@media (max-width: 1000px) {
.closing-cta-photo { width: 150px; }
.closing-cta-inner { gap: 22px; }
.btn-closing-cta { font-size: 18px; padding: 22px 28px; }
}
/* On a phone there is no room beside the button, so the photos tuck in above
it rather than shrinking to thumbnails. */
@media (max-width: 700px) {
.closing-cta { padding: 48px 18px; }
.closing-cta-inner { flex-wrap: wrap; gap: 18px; }
.closing-cta-photo { width: 120px; order: 1; }
.btn-closing-cta { order: 2; flex: 1 0 100%; font-size: 17px; padding: 20px 24px; }
}
/* ── Buy button: gold on hover, and a periodic nudge ─────────────────────
Deliberately at the end of the stylesheet: the product page redefines
.btn-hero and .btn-summary further up, so anything earlier loses to them. */
.btn-hero:hover,
.btn-summary:hover,
.summary-cards-grid .btn-summary:hover {
background: var(--gold);
color: #160B35;
opacity: 1;
transform: translateY(-1px);
}
/* A short pulse every five seconds, to catch the eye without nagging. The
movement is squeezed into the tail of the cycle so the button sits still
for most of it. */
@keyframes cta-pulse {
0%, 86%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(211,165,110,0); }
90% { transform: scale(1.035); box-shadow: 0 0 0 10px rgba(211,165,110,0.24); }
94% { transform: scale(0.995); box-shadow: 0 0 0 18px rgba(211,165,110,0); }
97% { transform: scale(1.015); }
}
.btn-hero, .btn-summary, .btn-closing-cta {
animation: cta-pulse 5s ease-in-out infinite;
}
/* Hovering is attention enough, and the two transforms would fight. */
.btn-hero:hover, .btn-summary:hover, .btn-closing-cta:hover {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.btn-hero, .btn-summary, .btn-closing-cta { animation: none; }
}
/* ============================================================
Gotham Medium sets its own line height.
--font-h2 and --font-heading both resolve to the medium face (bold got
folded into it when the fourth file was dropped), and it is a tighter face
than the system sans it falls back to. Every place it is used sets 1.2 so
the two look the same whether or not the brand fonts are uploaded.
============================================================ */
body:not(.sales-page) h2,
.faq-question,
.site-nav-links a {
line-height: 1.2;
}
/* ── Features ─────────────────────────────────────────────────────────
A row of tiles: picture, heading, a line under it. Different from a copy
module, which is one wide block alternating image and text down the page —
these read across with their neighbours, which is what makes them a
comparison rather than a sequence.
Three fixed-width columns on desktop (mirrors the .bonus-modules /
.case-modules panel-per-row rhythm, just three-wide instead of one), two
on tablet, one on mobile — the same 768px/640px breakpoints used
throughout. Flex rather than an auto-fit grid: a grid's implicit columns
stretch to fill the row when there are fewer than three cards, which is
exactly what a 1- or 2-feature product must not do. Each flex-basis is a
third of the row minus its share of the gap, so cards stay the same size
whether there are one, two or six of them, and simply wrap. */
.feature-row-wrap { margin: 40px 0; }
.feature-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: start;
justify-content: center;
}
.feature-card {
flex: 0 1 calc((100% - 24px * 2) / 3);
min-width: 230px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 22px;
text-align: center;
}
.feature-card-media {
margin: -4px -4px 20px;
border-radius: 10px;
overflow: hidden;
background: var(--primary);
aspect-ratio: 4 / 3;
}
.feature-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature-card-title {
font-family: var(--font-h2, inherit);
font-size: 22px;
line-height: 1.25;
color: var(--white);
margin-bottom: 12px;
}
.feature-card-body { color: var(--text-light); line-height: 1.6; }
.feature-card-body p { margin-bottom: 10px; }
.feature-card-body p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
.feature-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
.feature-row { gap: 16px; }
.feature-card { flex-basis: 100%; padding: 18px; }
.feature-card-title { font-size: 20px; }
}