html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
/* ---------- BooksShore portal theme (blue / sage green / metallic gold) ---------- */
:root {
--bb-blue-50: #eff6ff;
--bb-blue-100: #dbeafe;
--bb-blue-200: #bfdbfe;
--bb-blue-500: #3b82f6;
--bb-blue-600: #2563eb;
--bb-blue-700: #1d4ed8;
--bb-blue-900: #1e3a8a;
--bb-sage-50: #f4f6f0;
--bb-sage-100: #e5eadb;
--bb-sage-200: #d0dbc0;
--bb-sage-300: #b3c497;
--bb-sage-500: #8ba06e;
--bb-sage-600: #718a56;
--bb-sage-700: #536440;
--bb-sage-900: #2c3623;
--bb-gold-100: #f8edc8;
--bb-gold-400: #e3c15c;
--bb-gold-500: #d4af37;
--bb-gold-600: #a9841f;
--bb-gold-700: #7d6318;
}
body {
background: var(--bb-sage-50);
}
.btn-primary {
background-color: var(--bb-blue-600);
border-color: var(--bb-blue-600);
}
.btn-primary:hover,
.btn-primary:focus {
background-color: var(--bb-blue-700);
border-color: var(--bb-blue-700);
}
/* ---------- Site header (two-tier) ---------- */
.brand {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.brand-text {
font-weight: 800;
font-size: 1.25rem;
color: var(--bb-blue-700);
}
.brand-accent {
color: var(--bb-sage-600);
font-weight: 600;
}
/* Image logo (Admin > Site Settings > Use the image logo). */
.brand-logo {
display: block;
height: 64px;
width: auto;
}
/* The logo's blue and green lettering needs a light backing on the dark footer. */
.brand-logo-plate {
display: inline-block;
padding: 0.5rem 0.85rem;
background: #fff;
border-radius: 0.75rem;
}
.site-footer .brand-logo {
height: 52px;
}
@media (max-width: 576px) {
.site-header .brand-logo {
height: 44px;
}
}
.site-header {
background: #fff;
border-bottom: 1px solid var(--bb-sage-200);
}
.site-header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.85rem 1rem;
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.header-search {
flex: 1 1 320px;
display: flex;
max-width: 560px;
border: 1px solid var(--bb-sage-200);
border-radius: 0.5rem;
overflow: hidden;
}
.header-search input {
flex: 1;
border: none;
padding: 0.55rem 0.9rem;
font-size: 0.9rem;
outline: none;
min-width: 0;
}
.header-search button {
border: none;
background: var(--bb-blue-600);
color: #fff;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.header-search button:hover {
background: var(--bb-blue-700);
}
.header-search svg {
width: 1.1rem;
height: 1.1rem;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.header-action-btn {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
padding: 0.3rem 0.4rem;
border-radius: 0.5rem;
color: var(--bb-sage-900);
}
.header-action-btn:hover {
background: var(--bb-sage-50);
}
.header-action-icon {
width: 1.6rem;
height: 1.6rem;
color: var(--bb-blue-700);
flex-shrink: 0;
}
.header-action-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
text-align: left;
}
.header-action-text small {
font-size: 0.7rem;
color: var(--bb-sage-700);
}
.header-action-text strong {
font-size: 0.85rem;
color: var(--bb-sage-900);
}
.site-subheader {
background: #fff;
border-bottom: 1px solid var(--bb-sage-200);
}
/* Browse Books, Blog and the other links share one set of rows (the nav's own box
is dropped with display: contents), all the same height, so a second row starts
right under Browse Books. */
.site-subheader-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.55rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
/* Browse Books (blue) and Blog (green): bold buttons that lead the menu. */
.all-categories-btn {
display: flex;
align-items: center;
gap: 0.4rem;
border: none;
border-radius: 0.6rem;
height: 2rem;
padding: 0 0.95rem;
background: var(--bb-blue-700);
box-shadow: 0 3px 8px rgba(29, 78, 216, 0.25);
font-weight: 600;
font-size: 0.85rem;
color: #fff;
white-space: nowrap;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.all-categories-btn:hover,
.all-categories-btn[aria-expanded="true"] {
background: var(--bb-blue-900);
}
.header-mega-blog-menu .all-categories-btn {
background: var(--bb-sage-700);
box-shadow: 0 3px 8px rgba(83, 100, 64, 0.25);
}
.header-mega-blog-menu .all-categories-btn:hover,
.header-mega-blog-menu .all-categories-btn[aria-expanded="true"] {
background: var(--bb-sage-900);
}
/* Waves: a link, not a menu, in an ocean colour of its own. */
.header-waves-btn {
flex-shrink: 0;
background: #0e7490;
box-shadow: 0 3px 8px rgba(14, 116, 144, 0.25);
text-decoration: none;
}
.header-waves-btn:hover,
.header-waves-btn:focus-visible {
background: #155e75;
color: #fff;
}
/* Shore Finds: a link, not a menu, in gold, shaped and lettered like the
buttons beside it. Fixed colours (not the palette, which night mode flips). */
.header-finds-btn {
flex-shrink: 0;
background: #b8901f;
box-shadow: 0 3px 8px rgba(184, 144, 31, 0.25);
text-decoration: none;
}
.header-finds-btn:hover,
.header-finds-btn:focus-visible {
background: #977518;
color: #fff;
}
.all-categories-btn svg,
.all-categories-btn .chevron {
width: 1.05rem;
height: 1.05rem;
color: #fff;
}
.all-categories-btn .chevron {
width: 0.8rem;
height: 0.8rem;
}
/* Top-level links wrap instead of scrolling; the grouped items live in dropdowns
(My Activity / Admin), and a scrolling container would clip those menus. */
.subheader-nav {
display: contents;
white-space: nowrap;
}
/* The other links: each in its own soft chip, blue on hover, with the same
corners as Browse Books and Blog. */
.subheader-nav > a,
.subheader-nav-toggle {
font-size: 0.85rem;
font-weight: 500;
color: var(--bb-sage-700);
text-decoration: none;
display: inline-flex;
align-items: center;
height: 2rem;
padding: 0 0.75rem;
border: 1px solid #e3e9d9;
border-radius: 0.6rem;
background: #f3f6ef;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Polls: a green count of polls open for voting (PollService). */
.subheader-polls {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.subheader-live {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0 0.4rem;
border-radius: 0.35rem;
background: #dcfce7;
color: #166534;
font-size: 0.7rem;
font-weight: 700;
line-height: 1.5;
}
.subheader-live::before {
content: "";
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: #16a34a;
}
/* Reading DNA quiz and Games links: a small gold "AI" / "Live" tag. */
.subheader-booktwin,
.subheader-games {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.subheader-ai {
padding: 0 0.4rem;
border-radius: 0.35rem;
background: linear-gradient(135deg, var(--bb-gold-400), var(--bb-gold-600));
color: #fff;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.04em;
line-height: 1.55;
}
.subheader-nav > a:hover,
.subheader-nav-toggle:hover,
.subheader-nav-toggle[aria-expanded="true"] {
color: var(--bb-blue-700);
background: var(--bb-blue-50);
border-color: var(--bb-blue-200);
}
.subheader-nav-toggle {
display: flex;
align-items: center;
gap: 0.3rem;
}
/* My Activity (bold logo blue with a gold border, beside the gold Finds) and
Admin (bold slate): filled chips at the end of the row. The extra .subheader-nav keeps
them ahead of the blog's dark theme. */
.subheader-nav .subheader-nav-toggle.subheader-activity,
.subheader-nav .subheader-nav-toggle.subheader-admin {
color: #fff;
font-weight: 600;
}
.subheader-nav .subheader-nav-toggle.subheader-activity {
background: #1d4ed8;
border: 2px solid #d4af37;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}
.subheader-nav .subheader-nav-toggle.subheader-activity:hover,
.subheader-nav .subheader-nav-toggle.subheader-activity[aria-expanded="true"] {
color: #fff;
background: #1e3a8a;
border-color: #a9841f;
}
.subheader-nav .subheader-nav-toggle.subheader-admin {
background: #3f4a5a;
border-color: #2f3845;
}
.subheader-nav .subheader-nav-toggle.subheader-admin:hover,
.subheader-nav .subheader-nav-toggle.subheader-admin[aria-expanded="true"] {
color: #fff;
background: #2f3845;
border-color: #1f2630;
}
.subheader-nav-toggle .chevron {
width: 0.8rem;
height: 0.8rem;
transition: transform 0.15s ease;
}
.subheader-nav-toggle[aria-expanded="true"] .chevron {
transform: rotate(180deg);
}
.subheader-nav .dropdown-menu {
min-width: 13rem;
font-size: 0.875rem;
}
.subheader-nav .dropdown-header {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bb-sage-700);
}
.subheader-nav .dropdown-item:hover,
.subheader-nav .dropdown-item:focus {
background: var(--bb-blue-50);
color: var(--bb-blue-700);
}
/* Inspiration: Poetry of the Day and Quote of the Day, with a line about each. */
.inspiration-menu {
min-width: 18rem;
padding: 0.4rem;
border: 1px solid var(--bb-sage-100);
border-radius: 0.9rem;
box-shadow: 0 14px 32px rgba(44, 54, 35, 0.14);
}
.inspiration-item {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.65rem;
border-radius: 0.65rem;
white-space: normal;
}
.inspiration-item strong {
display: block;
color: var(--bb-sage-900);
font-size: 0.9rem;
}
.inspiration-item small {
display: block;
color: #6b7280;
font-size: 0.78rem;
}
.inspiration-icon {
display: grid;
flex: none;
place-items: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 0.6rem;
background: var(--bb-sage-50);
font-size: 1.1rem;
}
.inspiration-icon-poetry {
background: linear-gradient(150deg, #0f3d3e, #3b0764);
}
.inspiration-icon-quote {
background: var(--bb-gold-100);
}
/* ---------- Hero v2 (two-column with illustration) ---------- */
.hero-v2 {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 2rem;
background: linear-gradient(135deg, var(--bb-sage-50) 0%, var(--bb-blue-50) 100%);
border-radius: 0.85rem;
padding: 2.25rem 2rem;
margin: 1.5rem 0;
}
.hero-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bb-blue-700);
margin-bottom: 0.6rem;
}
.hero-title {
font-size: 2.1rem;
font-weight: 800;
color: var(--bb-sage-900);
margin-bottom: 0.6rem;
line-height: 1.15;
}
.hero-subtitle {
font-size: 0.95rem;
color: var(--bb-sage-700);
margin-bottom: 1.25rem;
max-width: 480px;
}
.hero-search {
display: flex;
gap: 0.5rem;
max-width: 480px;
margin-bottom: 1.5rem;
}
.hero-search .btn-lg svg {
width: 1.1rem;
height: 1.1rem;
}
/* Shortcuts under the home page search: new arrivals, deals, blog, sell. */
.hero-quicklinks {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: -0.5rem 0 1.5rem;
}
.hero-quicklinks a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--bb-sage-200);
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
color: var(--bb-sage-900);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.hero-quicklinks a:hover {
border-color: var(--bb-blue-500);
color: var(--bb-blue-700);
transform: translateY(-1px);
}
.hero-quicklinks svg {
width: 15px;
height: 15px;
color: var(--bb-blue-600);
}
/* A small label above a home page section title ("Just in", "From the blog"). */
.section-kicker {
display: block;
margin-bottom: 0.15rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bb-gold-600);
}
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.trust-badge {
display: flex;
align-items: flex-start;
gap: 0.5rem;
max-width: 160px;
}
.trust-badge svg {
width: 1.3rem;
height: 1.3rem;
color: var(--bb-blue-700);
flex-shrink: 0;
margin-top: 0.1rem;
}
.trust-badge strong {
display: block;
font-size: 0.82rem;
color: var(--bb-sage-900);
}
.trust-badge span {
font-size: 0.72rem;
color: var(--bb-sage-700);
}
.hero-v2-visual {
display: flex;
align-items: center;
justify-content: center;
}
.hero-illustration {
width: 100%;
max-width: 340px;
height: auto;
}
/* With Shop by Category beside it, the banner is a little tighter and the
category circles take the illustration's place, on the hero's own background. */
.hero-v2.has-categories {
grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
gap: 1.75rem;
padding: 1.75rem 1.75rem 1.75rem 2rem;
}
.hero-v2.has-categories .hero-title {
font-size: 1.85rem;
}
.hero-v2.has-categories .hero-subtitle {
margin-bottom: 1rem;
}
.hero-v2.has-categories .hero-search {
margin-bottom: 1.15rem;
}
.hero-v2.has-categories .hero-quicklinks {
margin-bottom: 1.15rem;
}
.hero-v2.has-categories .trust-badges {
gap: 1rem 1.25rem;
}
.hero-v2-categories {
min-width: 0;
}
.hero-v2-categories .section-header {
margin-bottom: 0.9rem;
}
.hero-v2-categories .section-header h2 {
font-size: 1.15rem;
}
.hero-v2-categories .category-circle-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.9rem 0.5rem;
}
.hero-v2-categories .category-circle-icon {
width: 3rem;
height: 3rem;
}
.hero-v2-categories .category-circle-icon svg {
width: 1.3rem;
height: 1.3rem;
}
.hero-v2-categories .category-circle-label {
font-size: 0.74rem;
line-height: 1.2;
}
/* ---------- Category circles ---------- */
.category-circle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 1rem;
}
.category-circle {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
text-decoration: none;
color: inherit;
}
.category-circle-icon {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: transform 0.15s ease;
}
.category-circle-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.category-circle:hover .category-circle-icon {
transform: translateY(-3px) scale(1.05);
}
.category-circle-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--bb-sage-900);
}
.cat-blue { background: var(--bb-blue-600); }
.cat-sage { background: var(--bb-sage-600); }
.cat-gold { background: var(--bb-gold-500); }
.cat-blue-deep { background: var(--bb-blue-900); }
.cat-sage-deep { background: var(--bb-sage-900); }
.cat-gold-deep { background: var(--bb-gold-700); }
/* ---------- Promo banner ---------- */
.promo-banner {
display: grid;
grid-template-columns: 1.4fr 0.6fr;
align-items: center;
gap: 1.5rem;
background: linear-gradient(135deg, var(--bb-sage-100), var(--bb-gold-100));
border-radius: 0.85rem;
padding: 2rem;
}
.promo-banner-tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bb-gold-700);
background: #fff;
padding: 0.2rem 0.65rem;
border-radius: 999px;
margin-bottom: 0.6rem;
}
.promo-banner-text h2 {
font-size: 1.5rem;
font-weight: 800;
color: var(--bb-sage-900);
margin-bottom: 0.5rem;
}
.promo-banner-text p {
font-size: 0.9rem;
color: var(--bb-sage-700);
max-width: 460px;
margin-bottom: 1rem;
}
.promo-banner-illustration {
width: 100%;
max-width: 200px;
justify-self: center;
}
/* Bookshop banner: the illustration leads, in blue, to stand apart from the sell banner. */
.promo-banner-seller {
grid-template-columns: 0.6fr 1.4fr;
background: linear-gradient(135deg, var(--bb-blue-50), var(--bb-blue-100) 55%, var(--bb-gold-100));
}
.promo-banner-seller .promo-banner-tag {
color: var(--bb-blue-700);
}
.promo-banner-seller .promo-banner-text h2 {
color: var(--bb-blue-900);
}
.promo-banner-seller .promo-banner-text p {
color: var(--bb-blue-900);
opacity: 0.85;
max-width: 520px;
}
.promo-banner-points {
list-style: none;
padding: 0;
margin: 0 0 1.1rem;
display: grid;
gap: 0.35rem;
font-size: 0.88rem;
color: var(--bb-blue-900);
}
.promo-banner-points li {
position: relative;
padding-left: 1.5rem;
}
.promo-banner-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.2rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--bb-blue-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
/* ---------- Feature strip ---------- */
.feature-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.25rem;
border-top: 1px solid var(--bb-sage-200);
border-bottom: 1px solid var(--bb-sage-200);
padding: 1.5rem 0;
}
.feature-strip-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.feature-strip-item svg {
width: 1.6rem;
height: 1.6rem;
color: var(--bb-blue-700);
flex-shrink: 0;
}
.feature-strip-item strong {
display: block;
font-size: 0.85rem;
color: var(--bb-sage-900);
}
.feature-strip-item span {
font-size: 0.75rem;
color: var(--bb-sage-700);
}
/* ---------- Site footer ---------- */
.site-footer {
background: var(--bb-sage-900);
color: var(--bb-sage-200);
margin-top: 2rem;
}
.site-footer .brand-text {
color: #fff;
}
.site-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 2.5rem 1rem 1.5rem;
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr) minmax(170px, 1.2fr);
gap: 2rem 2.5rem;
}
/* The footer's links sit in as many columns as fit, so the lists stay short. */
.footer-links {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
column-gap: 1.5rem;
}
.footer-links-narrow {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.footer-links form {
margin: 0;
}
.footer-brand p {
margin-top: 0.75rem;
font-size: 0.85rem;
color: var(--bb-sage-300);
max-width: 280px;
}
.footer-col h6 {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
margin-bottom: 0.85rem;
}
.footer-col a,
.footer-link-btn {
display: block;
font-size: 0.85rem;
color: var(--bb-sage-300);
text-decoration: none;
margin-bottom: 0.6rem;
background: none;
border: none;
padding: 0;
text-align: left;
}
.footer-col a:hover,
.footer-link-btn:hover {
color: #fff;
}
/* Round platform logos (SocialIcons): footer social links, book share bar,
Admin > Integrations. --brand is the platform's colour, set inline. */
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
padding: 0;
border: none;
border-radius: 50%;
background: var(--brand, var(--bb-sage-700, #536440));
color: #fff;
text-decoration: none;
flex-shrink: 0;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
span.social-icon {
cursor: default;
}
a.social-icon:hover,
a.social-icon:focus-visible,
button.social-icon:hover,
button.social-icon:focus-visible {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}
.social-icon:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.social-icon-sm {
width: 2rem;
height: 2rem;
}
.social-icon[data-platform="Instagram"] {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer-social-label {
margin-top: 1.1rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
}
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.6rem;
}
/* On the dark footer the icons sit in soft glass circles and light up in their
own colour on hover. */
.footer-social .social-icon {
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
color: var(--bb-sage-200, #e5eadb);
}
.footer-social .social-icon:hover,
.footer-social .social-icon:focus-visible {
background: var(--brand);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
color: #fff;
}
.footer-social .social-icon[data-platform="Instagram"]:hover,
.footer-social .social-icon[data-platform="Instagram"]:focus-visible {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
/* Black brands (X, TikTok) need an outline to stand out on the dark footer. */
.footer-social .social-icon[data-platform="X"]:hover,
.footer-social .social-icon[data-platform="TikTok"]:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 6px 14px rgba(0, 0, 0, 0.3);
}
.share-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 1rem;
text-align: center;
font-size: 0.78rem;
color: var(--bb-sage-300);
}
.section {
margin-bottom: 2.75rem;
}
.section-header {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1.1rem;
}
.section-header h2 {
font-size: 1.35rem;
font-weight: 700;
margin: 0;
color: var(--bb-sage-900);
}
.section-link {
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
color: var(--bb-blue-700);
white-space: nowrap;
}
.section-link:hover {
text-decoration: underline;
}
.empty-state {
background: #fff;
border: 1px dashed var(--bb-sage-300);
border-radius: 0.75rem;
padding: 2rem;
text-align: center;
color: var(--bb-sage-700);
}
/* Small-tile book grid */
.tile-grid {
display: grid;
gap: 0.75rem;
}
.tile-grid-compact {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.badge-category {
font-size: 0.68rem;
font-weight: 600;
color: var(--bb-sage-700);
background: var(--bb-sage-100);
padding: 0.15rem 0.5rem;
border-radius: 999px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.badge-used {
color: var(--bb-gold-700);
background: var(--bb-gold-100);
}
/* ---------- Catalog page ---------- */
.catalog-title {
font-size: 1.6rem;
font-weight: 800;
color: var(--bb-sage-900);
margin: 0;
}
/* Compact mini tiles for categories / authors */
.mini-tile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.3rem;
padding: 1rem 0.75rem;
border-radius: 0.65rem;
background: #fff;
border: 1px solid var(--bb-sage-200);
text-decoration: none;
color: inherit;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mini-tile:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
border-color: var(--bb-gold-500);
color: inherit;
}
.mini-tile-icon {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--bb-blue-50);
color: var(--bb-blue-700);
display: flex;
align-items: center;
justify-content: center;
}
.mini-tile-icon svg {
width: 1.1rem;
height: 1.1rem;
}
.mini-tile-avatar {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--bb-sage-600);
color: #fff;
font-weight: 700;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
}
.mini-tile-name {
font-weight: 600;
font-size: 0.85rem;
color: var(--bb-sage-900);
}
.mini-tile-count {
font-size: 0.75rem;
color: var(--bb-sage-700);
}
@media (max-width: 900px) {
.hero-v2 {
grid-template-columns: 1fr;
}
.hero-v2-visual {
order: -1;
}
.hero-v2.has-categories {
grid-template-columns: 1fr;
padding: 1.5rem;
}
.hero-illustration {
max-width: 240px;
}
.promo-banner {
grid-template-columns: 1fr;
text-align: center;
}
.promo-banner-text p {
margin-left: auto;
margin-right: auto;
}
.promo-banner-points {
justify-items: start;
text-align: left;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.trust-badge {
max-width: none;
}
.site-footer-inner {
grid-template-columns: 2fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 576px) {
.hero-v2 {
padding: 1.5rem 1.1rem;
}
.hero-title {
font-size: 1.5rem;
}
.hero-search {
flex-direction: column;
}
.header-search {
order: 3;
flex-basis: 100%;
max-width: none;
}
.header-actions {
margin-left: 0;
}
.tile-grid-compact,
.category-circle-grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.site-footer-inner {
grid-template-columns: 1fr;
}
}
/* ---------- Auth pages (register / login) ---------- */
.auth-wrap {
display: flex;
justify-content: center;
padding: 2.5rem 1rem;
}
.auth-card {
width: 100%;
max-width: 640px;
background: #fff;
border-radius: 0.75rem;
border-top: 4px solid var(--bb-gold-500);
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.08);
padding: 2rem 2.25rem;
}
.auth-card-header {
text-align: center;
margin-bottom: 1.75rem;
}
.auth-card-header h1 {
font-size: 1.5rem;
font-weight: 800;
color: var(--bb-blue-900);
margin-bottom: 0.25rem;
}
.auth-card-header p {
color: var(--bb-sage-700);
margin-bottom: 0;
}
.auth-card .form-label {
font-weight: 600;
color: var(--bb-blue-900);
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 0.2rem var(--bb-blue-100);
}
.auth-card .form-text {
color: var(--bb-sage-600);
}
.auth-card .btn-primary {
width: 100%;
padding: 0.6rem;
font-weight: 700;
}
.auth-card-footer {
text-align: center;
margin-top: 1.25rem;
color: var(--bb-sage-700);
}
.auth-card-footer a {
color: var(--bb-blue-600);
font-weight: 600;
text-decoration: none;
}
.auth-card-footer a:hover {
text-decoration: underline;
}
/* ============================================================
Modern forms & tables (applied site-wide via Bootstrap classes)
============================================================ */
h1, h2, h3 {
color: var(--bb-blue-900);
font-weight: 700;
letter-spacing: -0.01em;
}
/* Forms */
.form-label {
font-weight: 600;
color: var(--bb-blue-900);
margin-bottom: 0.35rem;
}
.form-label.required::after {
content: " *";
color: #dc3545;
}
.required-hint {
font-size: 0.875rem;
color: var(--bb-sage-700);
margin-bottom: 1.1rem;
}
/* Registration: gender choice as chips (public sign-up and Create User). */
.join-gender {
border: 0;
}
.join-gender legend {
float: none;
width: auto;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.join-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.join-chip {
position: relative;
cursor: pointer;
}
.join-chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.join-chip span {
display: inline-block;
padding: 0.4rem 0.85rem;
border: 1.5px solid var(--bb-sage-200);
border-radius: 999px;
background: var(--bb-sage-50);
color: var(--bb-sage-900);
font-size: 0.9rem;
font-weight: 600;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.join-chip:hover span {
border-color: var(--bb-sage-500);
}
.join-chip input:checked + span {
border-color: var(--bb-gold-500);
background: var(--bb-gold-100);
}
.join-chip input:focus-visible + span {
outline: 3px solid var(--bb-blue-500);
outline-offset: 2px;
}
.required-hint .required-mark {
color: #dc3545;
font-weight: 700;
}
.form-control,
.form-select {
border: 1px solid #d9dee5;
border-radius: 10px;
padding: 0.55rem 0.85rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
background-color: #fff;
}
.form-control:focus,
.form-select:focus {
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 0.2rem var(--bb-blue-100);
}
.form-control:disabled {
background-color: var(--bb-sage-50);
opacity: 0.75;
}
textarea.form-control {
border-radius: 12px;
}
.form-check-input {
border-radius: 0.3rem;
}
.form-check-input:checked {
background-color: var(--bb-blue-600);
border-color: var(--bb-blue-600);
}
.form-check-input:focus {
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 0.2rem var(--bb-blue-100);
}
/* Buttons */
.btn {
border-radius: 8px;
font-weight: 600;
padding: 0.5rem 1.1rem;
transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
transform: translateY(-1px);
}
.btn-sm {
border-radius: 7px;
padding: 0.3rem 0.7rem;
}
.btn-primary {
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover {
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
/* Tables */
.table {
border-collapse: separate;
border-spacing: 0;
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.table thead th {
background: var(--bb-blue-50);
color: var(--bb-blue-900);
text-transform: uppercase;
font-size: 0.74rem;
letter-spacing: 0.05em;
font-weight: 700;
border-bottom: 1px solid var(--bb-blue-100);
padding: 0.85rem 1rem;
white-space: nowrap;
}
.table tbody td {
padding: 0.8rem 1rem;
vertical-align: middle;
border-bottom: 1px solid #eef1f5;
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: var(--bb-sage-50);
}
.table tbody tr:hover {
background-color: var(--bb-blue-50);
}
.table thead tr:first-child th:first-child {
border-top-left-radius: 14px;
}
.table thead tr:first-child th:last-child {
border-top-right-radius: 14px;
}
.table tbody tr:last-child td:first-child {
border-bottom-left-radius: 14px;
}
.table tbody tr:last-child td:last-child {
border-bottom-right-radius: 14px;
}
/* Badges */
.badge {
border-radius: 999px;
font-weight: 600;
padding: 0.4em 0.75em;
letter-spacing: 0.01em;
}
/* Alerts */
.alert {
border: none;
border-radius: 12px;
padding: 0.9rem 1.1rem;
}
.alert-info {
background: var(--bb-blue-50);
color: var(--bb-blue-900);
}
.alert-success {
background: #eafaf0;
color: var(--bb-sage-700);
}
.alert-warning {
background: var(--bb-gold-100);
color: #7d6318;
}
.alert-danger {
background: #fdeceb;
color: #b02a24;
}
/* Pagination */
.pagination .page-link {
border-radius: 8px;
margin: 0 0.15rem;
border: 1px solid #e2e6ea;
color: var(--bb-blue-700);
}
.pagination .page-item.active .page-link {
background-color: var(--bb-blue-600);
border-color: var(--bb-blue-600);
color: #fff;
}
.pagination .page-item.disabled .page-link {
color: #adb5bd;
}
/* Card-wrapped Create/Edit forms (Sell, Admin CRUD) */
.form-card {
background: #fff;
border-radius: 14px;
border-top: 4px solid var(--bb-blue-500);
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.08);
padding: 1.75rem 2rem;
margin-bottom: 2rem;
}
.form-card-header {
margin-bottom: 1.25rem;
}
.form-card-header h1 {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.form-card-header p {
color: var(--bb-sage-700);
margin-bottom: 0;
}
@media (max-width: 576px) {
.form-card {
padding: 1.25rem 1.25rem;
}
}
/* ---------- Notification panel ---------- */
.notif-btn {
position: relative;
}
.notif-badge {
position: absolute;
top: 0;
right: 0;
min-width: 1.15rem;
height: 1.15rem;
padding: 0 0.3rem;
border-radius: 999px;
background: #dc2626;
color: #fff;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.15rem;
text-align: center;
box-shadow: 0 0 0 2px #fff;
}
.notif-panel {
width: 22rem;
max-width: calc(100vw - 2rem);
padding: 0;
overflow: hidden;
}
.notif-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--bb-sage-100);
}
.notif-panel-count {
font-size: 0.8rem;
color: var(--bb-blue-700);
font-weight: 600;
}
.notif-empty {
margin: 0;
padding: 1.25rem 1rem;
font-size: 0.875rem;
color: var(--bb-sage-700);
}
.notif-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 20rem;
overflow-y: auto;
}
.notif-item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.6rem;
row-gap: 0.15rem;
padding: 0.65rem 1rem;
color: var(--bb-sage-900);
text-decoration: none;
border-bottom: 1px solid var(--bb-sage-50);
}
.notif-item:hover {
background: var(--bb-blue-50);
}
.notif-kind {
grid-row: span 2;
align-self: start;
padding: 0.1rem 0.45rem;
border-radius: 0.35rem;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.notif-kind-order {
background: var(--bb-blue-600);
color: #fff;
}
.notif-kind-store-order {
background: var(--bb-sage-600);
color: #fff;
}
.notif-text {
font-size: 0.85rem;
line-height: 1.3;
}
.notif-time {
font-size: 0.72rem;
color: var(--bb-sage-700);
}
.notif-panel-footer {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
padding: 0.65rem 1rem;
background: var(--bb-sage-50);
font-size: 0.8rem;
}
.notif-panel-footer a {
color: var(--bb-blue-700);
text-decoration: none;
}
.notif-panel-footer a:hover {
text-decoration: underline;
}
.notif-pill {
display: inline-block;
min-width: 1.1rem;
padding: 0 0.3rem;
border-radius: 999px;
background: var(--bb-blue-600);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
text-align: center;
}
.badge-new {
display: inline-block;
margin-left: 0.35rem;
padding: 0.05rem 0.4rem;
border-radius: 0.3rem;
background: var(--bb-blue-600);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
vertical-align: middle;
}
.table > tbody > tr.row-new > td {
box-shadow: inset 0 0 0 9999px var(--bb-blue-50);
}
/* ---------- Admin site settings ---------- */
.settings-row {
padding: 0.25rem 0 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--bb-sage-100);
}
.settings-row .form-check-label {
font-weight: 600;
}
.settings-help {
margin: 0.25rem 0 0 2.5em;
font-size: 0.875rem;
color: var(--bb-sage-700);
}
/* Sticky list of sections beside one card per category. */
.settings-layout {
display: grid;
grid-template-columns: 13rem minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
max-width: 68rem;
}
.settings-layout > .settings-sections:only-child {
grid-column: 1 / -1;
max-width: 52rem;
}
.settings-nav {
position: sticky;
top: 1rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
max-height: calc(100vh - 2rem);
padding: 0.75rem;
overflow-y: auto;
border: 1px solid var(--bb-sage-200);
border-radius: 0.9rem;
background: #fff;
scrollbar-width: thin;
}
/* Section links in groups (Store & selling, Site & home page, Community, Emails). */
.settings-nav-group {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.settings-nav-group + .settings-nav-group {
padding-top: 0.6rem;
border-top: 1px solid var(--bb-sage-100);
}
.settings-nav-heading {
margin: 0 0 0.15rem;
padding: 0 0.6rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bb-sage-600);
}
.settings-nav-filter {
border-radius: 0.5rem;
}
.settings-nav-none {
margin: 0;
padding: 0 0.6rem;
color: var(--bb-sage-600);
font-size: 0.85rem;
}
.settings-nav a {
padding: 0.4rem 0.6rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--bb-sage-900);
text-decoration: none;
}
.settings-nav a:hover {
background: var(--bb-sage-50);
color: var(--bb-blue-700);
}
.settings-nav a.active {
background: var(--bb-blue-50);
color: var(--bb-blue-700);
}
.settings-card {
padding: 1.5rem 1.75rem 0.5rem;
margin-bottom: 1.25rem;
scroll-margin-top: 1rem;
}
form.settings-card {
padding-bottom: 1.5rem;
}
.settings-card-title {
font-size: 1.15rem;
margin-bottom: 0.25rem;
}
.settings-card-intro {
font-size: 0.9rem;
color: var(--bb-sage-700);
margin-bottom: 1rem;
}
.settings-card .settings-row:last-child {
border-bottom: 0;
}
.settings-group-title {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.settings-rule-table {
font-size: 0.9rem;
}
.settings-rule-table thead th {
font-size: 0.8rem;
font-weight: 600;
color: var(--bb-sage-700);
border-bottom-color: var(--bb-sage-200);
}
.settings-rule-table th[scope="row"] {
font-weight: 600;
}
.settings-rule-table .form-switch .form-check-input {
margin-left: 0;
}
.settings-rule-table td[data-listing-rule] {
transition: opacity 0.15s;
}
/* Keeps Save in reach at the bottom of the screen on this long form. */
.settings-savebar {
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 1.25rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.9rem;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 -6px 20px rgba(30, 58, 138, 0.08);
}
@media (max-width: 991.98px) {
.settings-layout {
grid-template-columns: minmax(0, 1fr);
}
.settings-nav {
position: static;
max-height: none;
overflow: visible;
}
.settings-nav-group {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.settings-nav-heading {
flex-basis: 100%;
}
.settings-card {
padding: 1.25rem 1rem 0.25rem;
}
.settings-help {
margin-left: 0;
}
}
/* ---------- New / used badges and form toggle ---------- */
.badge-new-book {
color: var(--bb-blue-700);
background: var(--bb-blue-50);
}
/* ---------- Cart ---------- */
.cart-btn {
position: relative;
text-decoration: none;
}
.buy-box {
border-color: var(--bb-gold-400);
background: #fff;
}
.buy-box-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--bb-sage-900);
}
.cart-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cart-row {
display: grid;
grid-template-columns: 64px 1fr auto auto;
gap: 1rem;
align-items: center;
padding: 0.85rem;
background: #fff;
border: 1px solid var(--bb-sage-200);
border-radius: 12px;
}
.cart-row-problem {
border-color: #fca5a5;
background: #fef2f2;
}
.cart-row-cover {
position: relative;
width: 64px;
height: 88px;
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--bb-blue-600), var(--bb-blue-900));
color: #fff;
font-weight: 700;
font-size: 1.5rem;
text-decoration: none;
}
/* Subscription / premium packages in the cart: an icon tile the size of a book cover. */
.cart-row-cover-package {
flex-direction: column;
gap: 0.35rem;
}
.cart-row-cover-package svg {
width: 28px;
height: 28px;
}
.cart-row-cover-package.is-premium {
background: linear-gradient(135deg, var(--bb-gold-400), var(--bb-gold-700));
}
.cart-row-cover-days {
font-size: 0.65rem;
font-weight: 600;
line-height: 1;
text-align: center;
opacity: 0.95;
}
.cart-row-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-row-title {
font-weight: 600;
color: var(--bb-sage-900);
text-decoration: none;
}
.cart-row-title:hover {
color: var(--bb-blue-700);
}
.cart-row-qty {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.cart-row-price {
font-weight: 700;
text-align: right;
min-width: 5.5rem;
color: var(--bb-sage-900);
}
@media (max-width: 575.98px) {
.cart-row {
grid-template-columns: 56px 1fr;
}
.cart-row-qty,
.cart-row-price {
grid-column: 2;
text-align: left;
}
}
.order-summary {
border-color: var(--bb-sage-200);
position: sticky;
top: 1rem;
}
.order-summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 0.75rem;
border-top: 1px solid var(--bb-sage-200);
font-size: 1.1rem;
}
.payment-option {
padding: 0.75rem 0.75rem 0.75rem 2.25rem;
border: 1px solid var(--bb-blue-200);
border-radius: 10px;
background: var(--bb-blue-50);
}
/* ---------- Orders ---------- */
.order-status {
display: inline-block;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.order-status-placed {
color: var(--bb-gold-700);
background: var(--bb-gold-100);
}
.order-status-progress {
color: var(--bb-blue-700);
background: var(--bb-blue-100);
}
.order-status-delivered {
color: var(--bb-sage-900);
background: var(--bb-sage-200);
}
.order-status-cancelled {
color: #4b5563;
background: #e5e7eb;
}
.order-filter {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1rem;
}
.order-filter a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
height: 2rem;
padding: 0 0.8rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.5rem;
color: var(--bb-sage-700);
background: #fff;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
}
.order-filter-count {
min-width: 1.25rem;
padding: 0 0.35rem;
border-radius: 999px;
background: #dc2626;
color: #fff;
font-size: 0.7rem;
line-height: 1.25rem;
text-align: center;
}
.order-filter a.active,
.order-filter a:hover {
color: #fff;
background: var(--bb-blue-600);
border-color: var(--bb-blue-600);
}
.order-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.order-card {
border-color: var(--bb-sage-200);
}
.order-card-number {
font-weight: 700;
color: var(--bb-sage-900);
text-decoration: none;
}
.order-card-number:hover {
color: var(--bb-blue-700);
}
.order-track {
display: flex;
list-style: none;
padding: 0;
margin: 0.5rem 0 1rem;
}
.order-track-step {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--bb-sage-500);
}
.order-track-step::before {
content: "";
position: absolute;
top: 0.55rem;
right: 50%;
width: 100%;
height: 3px;
background: var(--bb-sage-200);
}
.order-track-step:first-child::before {
display: none;
}
.order-track-step.is-done::before {
background: var(--bb-sage-600);
}
.order-track-dot {
position: relative;
z-index: 1;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
background: #fff;
border: 3px solid var(--bb-sage-200);
}
.order-track-step.is-done .order-track-dot {
background: var(--bb-sage-600);
border-color: var(--bb-sage-600);
}
.order-track-label {
margin-top: 0.35rem;
font-weight: 600;
font-size: 0.9rem;
}
.order-track-step.is-done .order-track-label {
color: var(--bb-sage-900);
}
.order-track-time {
font-size: 0.75rem;
color: var(--bb-sage-700);
}
.order-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.order-stat {
display: flex;
flex-direction: column;
padding: 0.75rem 1rem;
background: #fff;
border: 1px solid var(--bb-sage-200);
border-radius: 12px;
text-decoration: none;
color: var(--bb-sage-900);
}
.order-stat.active,
.order-stat:hover {
border-color: var(--bb-blue-500);
}
.order-stat-count {
font-size: 1.5rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.order-stat-label {
font-size: 0.85rem;
color: var(--bb-sage-700);
}
/* ---------- Star ratings ---------- */
.stars {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
line-height: 1;
}
.stars-track {
position: relative;
display: inline-block;
color: var(--bb-sage-200);
letter-spacing: 1px;
}
.stars-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: var(--bb-gold-500);
}
.stars-count {
color: var(--bb-sage-700);
font-size: 0.8rem;
}
.star-input {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 0.15rem;
border: 0;
padding: 0;
margin: 0;
}
.star-input input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.star-input label {
font-size: 1.8rem;
line-height: 1;
color: var(--bb-sage-200);
cursor: pointer;
transition: color 0.1s ease;
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
color: var(--bb-gold-500);
}
.star-input input:focus-visible + label {
outline: 2px solid var(--bb-blue-500);
outline-offset: 2px;
border-radius: 4px;
}
.rating-summary {
padding: 1rem;
background: #fff;
border: 1px solid var(--bb-sage-200);
border-radius: 12px;
}
.rating-summary-average {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
color: var(--bb-sage-900);
font-variant-numeric: tabular-nums;
}
.rating-bar {
display: grid;
grid-template-columns: 2.2rem 1fr 2rem;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--bb-sage-700);
}
.rating-bar-track {
height: 0.5rem;
border-radius: 999px;
background: var(--bb-sage-100);
overflow: hidden;
}
.rating-bar-fill {
display: block;
height: 100%;
background: var(--bb-gold-500);
}
.rating-bar-count {
text-align: right;
font-variant-numeric: tabular-nums;
}
.review-list {
list-style: none;
padding: 0;
margin: 0;
}
.review {
padding: 0.85rem 0;
border-bottom: 1px solid var(--bb-sage-200);
}
.badge-verified {
color: var(--bb-sage-900);
background: var(--bb-sage-200);
margin-left: 0.35rem;
}
/* ---------- Sales, clearance and bundles ---------- */
.badge-sale {
color: #fff;
background: #dc2626;
}
.badge-clearance {
color: var(--bb-gold-700);
background: var(--bb-gold-100);
}
.badge-bundle {
color: #fff;
background: var(--bb-blue-700);
}
.badge-free-download {
color: #fff;
background: #15803d;
}
.buy-box-was {
font-size: 1rem;
font-weight: 400;
color: var(--bb-sage-500);
}
.book-shelf {
margin-bottom: 2rem;
}
.book-shelf-title {
font-size: 1.35rem;
font-weight: 700;
color: var(--bb-sage-900);
margin: 0;
}
.book-shelf-subtitle {
margin: 0.15rem 0 0;
color: var(--bb-sage-700);
font-size: 0.9rem;
}
.bundle-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
gap: 1rem;
}
.bundle-card {
border-color: var(--bb-blue-200);
}
.bundle-price {
font-size: 1.4rem;
font-weight: 700;
color: var(--bb-sage-900);
}
.bundle-books {
list-style: none;
padding: 0;
margin: 0.5rem 0 0.75rem;
}
.bundle-books li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem;
padding: 0.3rem 0;
border-bottom: 1px dashed var(--bb-sage-200);
}
.bundle-books-price {
margin-left: auto;
font-variant-numeric: tabular-nums;
}
/* Promotion form: book checklist */
.promo-book-list {
max-height: 22rem;
overflow-y: auto;
border: 1px solid #d9dee5;
border-radius: 10px;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.promo-book-list:focus-within {
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 0.2rem var(--bb-blue-100);
}
.promo-book:last-child {
border-bottom: 0;
}
.promo-book:has(input:checked) {
background: var(--bb-blue-50);
}
.promo-book {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.8rem;
border-bottom: 1px solid var(--bb-sage-100);
cursor: pointer;
margin: 0;
}
.promo-book:hover {
background: var(--bb-sage-50);
}
.promo-book-price {
font-variant-numeric: tabular-nums;
min-width: 5rem;
text-align: right;
}
@media (max-width: 575.98px) {
.promo-book {
grid-template-columns: auto 1fr;
}
}
/* ---------- Order cancellation ---------- */
.cancel-remarks {
white-space: pre-line;
}
/* ---------- Content pages (Privacy, About) ---------- */
.content-page {
max-width: 820px;
margin: 0 auto 2.5rem;
padding: 2rem 2.25rem;
background: #fff;
border-radius: 14px;
border-top: 4px solid var(--bb-blue-500);
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.08);
color: var(--bb-sage-900);
line-height: 1.65;
}
.content-page-header {
margin-bottom: 1.5rem;
}
.content-page-header h1 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.content-page-meta {
color: var(--bb-sage-700);
font-size: 0.9rem;
}
.content-page section {
scroll-margin-top: 1rem;
margin-top: 1.75rem;
}
.content-page h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--bb-blue-900);
margin-bottom: 0.6rem;
}
/* A sub-heading inside a section (About > My Reading Shore > How to create yours). */
.content-page section > h3 {
margin: 1.25rem 0 0.5rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--bb-blue-900);
}
.content-page ul {
padding-left: 1.25rem;
}
.content-page li {
margin-bottom: 0.4rem;
}
.content-page-toc {
padding: 1rem 1.25rem;
background: var(--bb-sage-50);
border: 1px solid var(--bb-sage-200);
border-radius: 10px;
font-size: 0.92rem;
}
.content-page-toc ol {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
columns: 2;
column-gap: 2rem;
}
.about-eyebrow {
display: inline-block;
margin-bottom: 0.5rem;
padding: 0.2rem 0.7rem;
border-radius: 999px;
background: var(--bb-gold-100);
color: var(--bb-gold-700);
font-weight: 700;
font-size: 0.85rem;
}
.about-mission {
padding: 1rem 1.25rem;
border-left: 4px solid var(--bb-gold-500);
background: var(--bb-blue-50);
border-radius: 0 10px 10px 0;
font-size: 1.1rem;
font-weight: 500;
color: var(--bb-blue-900);
}
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
gap: 1rem;
}
.about-card {
padding: 1rem 1.1rem;
border: 1px solid var(--bb-sage-200);
border-radius: 12px;
background: var(--bb-sage-50);
}
.about-card h3 {
font-size: 1rem;
font-weight: 700;
color: var(--bb-blue-700);
margin-bottom: 0.35rem;
}
.about-card p {
margin: 0;
font-size: 0.92rem;
color: var(--bb-sage-700);
}
@media (max-width: 576px) {
.content-page {
padding: 1.25rem;
}
.content-page-toc ol {
columns: 1;
}
}
/* ---------- Registration CAPTCHA ---------- */
.captcha-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.captcha-image {
max-width: 100%;
height: auto;
border: 1px solid var(--bb-sage-200);
border-radius: 0.375rem;
}
.captcha-input {
max-width: 16rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.captcha-input::placeholder {
letter-spacing: normal;
text-transform: none;
}
/* ---------- Subscriptions ---------- */
.order-status-failed {
color: #991b1b;
background: #fee2e2;
}
.plan-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.plan-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--bb-sage-200);
border-top: 4px solid var(--bb-blue-500);
border-radius: 12px;
padding: 1.25rem;
}
.plan-card h3 {
font-size: 1.15rem;
margin-bottom: 0.25rem;
}
.plan-price {
font-size: 1.75rem;
font-weight: 700;
color: var(--bb-blue-900);
}
.plan-duration {
color: var(--bb-sage-700);
margin-bottom: 0.75rem;
}
.plan-description {
font-size: 0.9rem;
color: var(--bb-sage-700);
}
.test-gateway-banner {
background: var(--bb-gold-100);
border: 1px dashed var(--bb-gold-700);
border-radius: 10px;
padding: 0.75rem 1rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
}
/* ---------- Row actions dropdown (admin tables) ---------- */
.row-actions-toggle {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.75rem;
border: 1px solid var(--bb-sage-200);
border-radius: 999px;
background: #fff;
color: var(--bb-blue-900);
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.row-actions-toggle:hover,
.row-actions-toggle[aria-expanded="true"] {
background: var(--bb-blue-50);
border-color: var(--bb-blue-200);
}
.row-actions-toggle .chevron {
width: 14px;
height: 14px;
transition: transform 0.15s;
}
.row-actions-toggle[aria-expanded="true"] .chevron {
transform: rotate(180deg);
}
.row-actions .dropdown-menu {
min-width: 13rem;
padding: 0.35rem;
border: 1px solid var(--bb-sage-200);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.12);
}
.row-actions .dropdown-header {
padding: 0.35rem 0.6rem 0.2rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.row-actions .dropdown-item {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.6rem;
border-radius: 8px;
font-size: 0.9rem;
}
.row-actions .dropdown-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.75;
}
.row-actions .dropdown-item:hover,
.row-actions .dropdown-item:focus {
background: var(--bb-blue-50);
color: var(--bb-blue-900);
}
.row-actions .dropdown-item.text-danger:hover,
.row-actions .dropdown-item.text-danger:focus {
background: #fee2e2;
color: #991b1b !important;
}
.row-actions .dropdown-item.disabled {
align-items: flex-start;
}
.row-actions-note {
display: block;
max-width: 14rem;
white-space: normal;
font-size: 0.75rem;
color: var(--bb-sage-700);
}
/* ---------- Payment badges and choices ---------- */
.payment-option + .payment-option {
margin-top: 0.5rem;
}
.payment-option:has(.form-check-input:not(:checked)) {
background: #fff;
border-color: var(--bb-sage-200);
}
.pay-badge {
display: inline-block;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.pay-badge-cash {
color: #4b5563;
background: #eef0f2;
}
.pay-badge-paid {
color: var(--bb-sage-900);
background: var(--bb-sage-200);
}
.pay-badge-pending {
color: var(--bb-gold-700);
background: var(--bb-gold-100);
}
.pay-badge-refund {
color: #991b1b;
background: #fee2e2;
}
/* ---------- Support ---------- */
.notif-kind-support {
background: var(--bb-gold-700);
color: #fff;
}
.ticket-status {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
.ticket-status-open {
color: var(--bb-blue-700);
background: var(--bb-blue-100);
}
.ticket-status-answered {
color: var(--bb-gold-700);
background: var(--bb-gold-100);
}
.ticket-status-closed {
color: #4b5563;
background: #e5e7eb;
}
.support-thread {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-bottom: 1.25rem;
}
.support-message {
max-width: 85%;
padding: 0.85rem 1rem;
border-radius: 14px;
background: #fff;
border: 1px solid var(--bb-sage-200);
}
.support-message-mine {
align-self: flex-end;
background: var(--bb-blue-50);
border-color: var(--bb-blue-200);
}
.support-message-staff {
border-left: 4px solid var(--bb-gold-700);
}
.support-message-meta {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.8rem;
color: var(--bb-sage-700);
margin-bottom: 0.35rem;
}
.support-message-body {
white-space: pre-wrap;
overflow-wrap: anywhere;
margin: 0;
}
.support-facts {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 1rem;
margin: 0;
font-size: 0.9rem;
}
.support-facts dt {
font-weight: 500;
color: var(--bb-sage-700);
}
.support-facts dd {
margin: 0;
}
@media (max-width: 576px) {
.support-message {
max-width: 100%;
}
}
/* ---------- Pager ---------- */
.pager-bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem 1rem;
margin-top: 1rem;
}
.pager-summary {
font-size: 0.9rem;
color: var(--bb-sage-700);
}
.pager-bar .pagination {
flex-wrap: wrap;
}
/* ---------- BooksShore picks ---------- */
.badge-pick {
color: var(--bb-gold-700);
background: var(--bb-gold-100);
border: 1px solid rgba(125, 99, 24, 0.25);
}
/* ---------- Premium members and featured listings ---------- */
.badge-premium,
.badge-featured {
color: var(--bb-sage-900);
background: var(--bb-gold-500);
}
/* ---------- Date filter ---------- */
/* Filter dropdowns share a row but never shrink past readable; when a custom
date range is shown the row wraps instead, keeping the buttons last. */
@media (min-width: 992px) {
.filter-col {
min-width: 10.5rem;
}
}
.date-range-group .form-control {
min-width: 0;
}
.date-filter-summary {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
margin-bottom: 1rem;
border-radius: 8px;
background: var(--bb-blue-50);
font-size: 0.9rem;
}
/* ---------- Admin menu and roles ---------- */
.admin-mega-menu {
padding: 0.5rem;
}
.admin-mega-menu.show {
display: grid;
grid-template-columns: repeat(2, minmax(11rem, 1fr));
gap: 0.25rem 0.75rem;
}
@media (min-width: 992px) {
.admin-mega-menu.show {
grid-template-columns: repeat(4, minmax(10.5rem, auto));
}
}
.admin-mega-section .dropdown-header {
padding: 0.4rem 0.75rem 0.25rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bb-blue-700);
}
.admin-mega-section .dropdown-item {
border-radius: 6px;
}
.permission-groups {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
}
.permission-group {
background: #fff;
border: 1px solid var(--bb-sage-200);
border-radius: 12px;
padding: 0.9rem 1rem;
}
.permission-group header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--bb-sage-100);
}
.permission-item {
margin-bottom: 0.6rem;
}
.permission-item.is-disabled {
opacity: 0.55;
}
.badge-admin-perm {
color: var(--bb-blue-700);
background: var(--bb-blue-50);
font-size: 0.68rem;
margin-left: 0.25rem;
}
.currency-preview {
display: inline-block;
padding: 0.45rem 0.75rem;
border-radius: 8px;
background: var(--bb-blue-50);
font-size: 0.9rem;
}
/* Searchable tick-box list (Site Settings > Countries & currencies). */
.checklist {
border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.checklist-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
padding: 0.5rem 0.6rem;
border-bottom: 1px solid var(--bs-border-color, #dee2e6);
background: #fafaf7;
}
.checklist-toolbar input[type="search"] {
flex: 1 1 200px;
max-width: 320px;
}
.checklist-count {
font-size: 0.8rem;
font-weight: 600;
color: var(--bb-sage-700, #536440);
margin-right: auto;
}
.checklist-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.1rem 0.75rem;
max-height: 260px;
overflow-y: auto;
padding: 0.5rem 0.6rem;
}
.checklist-option {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.25rem 0.35rem;
border-radius: 6px;
font-size: 0.875rem;
cursor: pointer;
min-width: 0;
}
.checklist-option:hover {
background: #f3f4ef;
}
.checklist-option.is-ticked {
background: var(--bb-blue-50, #eff6ff);
}
.checklist-option input {
margin: 0;
flex-shrink: 0;
}
.checklist-option input:disabled + .checklist-text {
opacity: 0.5;
}
.checklist-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.checklist-meta {
margin-left: auto;
font-size: 0.72rem;
color: #6b7280;
flex-shrink: 0;
}
.checklist-empty {
grid-column: 1 / -1;
margin: 0.5rem 0;
color: #6b7280;
font-size: 0.85rem;
}
/* Searchable multi-select filter (Manage Books > seller). */
.multi-filter-menu {
width: 100%;
min-width: 280px;
padding: 0.5rem;
}
.multi-filter-list {
max-height: 280px;
overflow-y: auto;
margin: 0.5rem 0;
}
.multi-filter-heading {
padding: 0.4rem 0.5rem 0.2rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
color: var(--bs-secondary-color, #6c757d);
}
.multi-filter-option {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.3rem 0.5rem;
border-radius: 6px;
cursor: pointer;
}
.multi-filter-option:hover {
background: var(--bb-blue-50);
}
.multi-filter-option .form-check-input {
margin-top: 0.2rem;
flex-shrink: 0;
}
.multi-filter-empty {
margin: 0.4rem 0.5rem;
font-size: 0.85rem;
color: var(--bs-secondary-color, #6c757d);
}
.multi-filter-actions {
display: flex;
justify-content: space-between;
border-top: 1px solid var(--bs-border-color, #dee2e6);
padding-top: 0.5rem;
}
/* Sales agents: referral code and commission rate on My Referrals / Admin > Sales Agents */
.referral-code {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.08em;
font-family: SFMono-Regular, Menlo, Consolas, monospace;
}
/* Registration: account type and its referral fields, just before the password */
.account-type-panel {
padding: 1rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.5rem;
background: #fbfcf8;
}
/* Home banners without a picture use the full width for their text. */
.promo-banner.promo-banner-no-art {
grid-template-columns: 1fr;
}
/* Two pictures sit side by side, so the picture column is wider. */
.promo-banner.promo-banner-two-art {
grid-template-columns: 1.15fr 0.85fr;
}
.promo-banner-seller.promo-banner-two-art {
grid-template-columns: 0.85fr 1.15fr;
}
.promo-banner-art-pair {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.promo-banner-art-pair .promo-banner-illustration {
flex: 1 1 0;
min-width: 0;
max-width: 180px;
}
@media (max-width: 900px) {
.promo-banner.promo-banner-two-art,
.promo-banner-seller.promo-banner-two-art {
grid-template-columns: 1fr;
}
.promo-banner-art-pair .promo-banner-illustration {
max-width: 150px;
}
}
/* Admin banner form: the pictures as tickable cards. */
.banner-picture-choices {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.6rem;
}
.banner-picture-choice {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0.6rem;
border: 2px solid var(--bb-sage-200);
border-radius: 0.6rem;
background: linear-gradient(135deg, var(--bb-sage-50), var(--bb-gold-100));
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
text-align: center;
}
.banner-picture-choice .form-check-input {
position: absolute;
top: 0.45rem;
left: 0.45rem;
margin: 0;
}
.banner-picture-choice .promo-banner-illustration {
max-width: 90px;
}
.banner-picture-choice:has(input:checked) {
border-color: var(--bb-sage-600);
box-shadow: 0 0 0 2px var(--bb-sage-200);
}
.banner-picture-choice.is-disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* ---------- All Categories menu ---------- */
/* Popular categories first, "Show all" for the rest, and a search box that filters as you type. */
.category-menu {
width: 300px;
max-width: calc(100vw - 32px);
padding: 0.5rem 0;
}
.category-menu-search {
padding: 0.25rem 0.75rem 0.5rem;
}
.category-menu-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 60vh;
overflow-y: auto;
}
.category-menu .dropdown-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
.category-menu-count {
font-size: 0.75rem;
color: var(--bb-sage-700);
background: var(--bb-sage-100);
border-radius: 999px;
padding: 0.05rem 0.5rem;
flex-shrink: 0;
}
.category-menu-empty {
margin: 0;
padding: 0.5rem 1rem;
font-size: 0.875rem;
color: #6b7280;
}
.category-menu-more {
display: block;
width: 100%;
margin-top: 0.25rem;
padding: 0.5rem 1rem;
border: 0;
border-top: 1px solid var(--bb-sage-200);
background: none;
text-align: left;
font-size: 0.875rem;
font-weight: 600;
color: var(--bb-blue-700);
}
.category-menu-more:hover,
.category-menu-more:focus-visible {
background: var(--bb-sage-50);
}
/* ---------- Header menus with tabs (Browse Books, Blog) ---------- */
.mega-menu {
width: 340px;
padding-top: 0;
overflow: hidden;
}
.mega-tabs {
display: flex;
gap: 0.25rem;
padding: 0.5rem 0.5rem 0;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--bb-sage-200);
background: var(--bb-sage-50);
}
.mega-tab {
flex: 1;
padding: 0.5rem 0.75rem;
border: 0;
border-bottom: 2px solid transparent;
background: none;
font-size: 0.85rem;
font-weight: 600;
color: var(--bb-sage-700);
}
.mega-tab:hover {
color: var(--bb-blue-700);
}
.mega-tab.active {
border-bottom-color: var(--bb-blue-600);
color: var(--bb-blue-700);
}
.mega-links {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.4rem;
padding: 0.6rem 0.75rem 0.1rem;
border-top: 1px solid var(--bb-sage-200);
}
.mega-links a {
padding: 0.3rem 0.75rem;
border-radius: 999px;
background: var(--bb-blue-50);
color: var(--bb-blue-700);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
}
.mega-links a:first-child {
background: var(--bb-blue-600);
color: #fff;
}
.mega-links a:hover {
background: var(--bb-blue-100);
color: var(--bb-blue-900);
}
.mega-links a:first-child:hover {
background: var(--bb-blue-700);
color: #fff;
}
.bulk-feature-bar .form-control {
width: auto;
}
/* ---------- Filter chips ---------- */
/* A toggle filter (checkbox + label) in a filter bar's .filter-toggles. */
.filter-chip {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.9rem;
border: 1px solid var(--bb-sage-200);
border-radius: 999px;
background: #fff;
color: var(--bb-sage-900);
font-size: 0.85rem;
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-chip:hover {
border-color: var(--bb-blue-500);
}
.btn-check:checked + .filter-chip {
background: var(--bb-blue-600);
border-color: var(--bb-blue-600);
color: #fff;
}
.btn-check:focus-visible + .filter-chip {
box-shadow: 0 0 0 3px var(--bb-blue-200);
}
/* ---------- Catalog results bar ---------- */
/* Under the catalog's filter bar: the result count and removable active filters. */
.catalog-results-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin-bottom: 1.5rem;
}
.catalog-results-count {
font-weight: 600;
color: var(--bb-sage-900);
}
.catalog-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.active-filter-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.4rem 0.2rem 0.7rem;
border-radius: 999px;
background: var(--bb-blue-50);
border: 1px solid var(--bb-blue-100);
color: var(--bb-blue-900);
font-size: 0.8rem;
text-decoration: none;
}
.active-filter-chip span[aria-hidden] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
font-size: 0.9rem;
line-height: 1;
}
.active-filter-chip:hover {
background: var(--bb-blue-100);
color: var(--bb-blue-900);
}
.active-filter-chip:hover span[aria-hidden] {
background: var(--bb-blue-600);
color: #fff;
}
.catalog-clear-all {
font-size: 0.8rem;
color: var(--bb-sage-700);
}
/* Manage Books > Set Language: a long list scrolls instead of running off the page. */
.language-menu {
max-height: 50vh;
overflow-y: auto;
}
/* ---------- Filter bars (every list page) ----------
One compact card per page: a search box, then fields that carry their own
name ("Status: All"), toggle chips and Apply/Clear. Markup:
site.js applies dropdowns and toggles as soon as they change and marks set
fields with .is-set. */
.filter-bar {
--filter-height: 2.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0 0 1rem;
padding: 0.6rem;
background: #fff;
border: 1px solid var(--bb-sage-200);
border-radius: 0.75rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.filter-search {
position: relative;
flex: 1 1 240px;
min-width: 0;
}
.filter-search svg {
position: absolute;
left: 0.7rem;
top: 50%;
width: 1rem;
height: 1rem;
transform: translateY(-50%);
color: var(--bb-sage-600);
pointer-events: none;
}
.filter-search input {
width: 100%;
height: var(--filter-height);
padding: 0 0.75rem 0 2.1rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.5rem;
background: var(--bb-sage-50);
font-size: 0.875rem;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-search input:focus {
outline: none;
background: #fff;
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 3px var(--bb-blue-100);
}
.filter-search input:not(:placeholder-shown) {
background: #fff;
border-color: var(--bb-blue-200);
}
/* A dropdown with its name inside the box. Fields keep their natural width
(the row wraps instead), so the arrow never covers the chosen value. */
.filter-field {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
max-width: 100%;
height: var(--filter-height);
margin: 0;
padding-left: 0.7rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.5rem;
background: #fff;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-field > span {
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bb-sage-700);
white-space: nowrap;
}
.filter-field .form-select,
.filter-field .filter-field-button {
min-width: 0;
height: 100%;
padding-top: 0;
padding-bottom: 0;
padding-left: 0.4rem;
border: 0;
border-radius: 0 0.5rem 0.5rem 0;
background-color: transparent;
box-shadow: none;
font-size: 0.875rem;
/* Normal weight: the browser sizes a dropdown by its options at normal weight,
so a bolder chosen value would run under the arrow. */
font-weight: 400;
color: var(--bb-sage-900);
cursor: pointer;
}
/* Extra room on the right: browsers measure options slightly narrower than
they draw the chosen value, which would put the longest one under the arrow. */
.filter-field .form-select {
flex: 0 0 auto;
width: auto;
max-width: 15rem;
padding-right: 2.6rem;
background-position: right 0.6rem center;
text-overflow: ellipsis;
}
.filter-field .form-select:focus,
.filter-field .filter-field-button:focus {
box-shadow: none;
}
.filter-field:hover {
border-color: var(--bb-sage-300);
}
.filter-field:focus-within {
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 3px var(--bb-blue-100);
}
.filter-field.is-set {
background: var(--bb-blue-50);
border-color: var(--bb-blue-200);
}
.filter-field.is-set > span {
color: var(--bb-blue-700);
}
/* A custom date range: two small date boxes in one field. */
.filter-field-dates {
gap: 0.35rem;
padding-right: 0.5rem;
cursor: default;
}
.filter-field-dates input {
height: calc(var(--filter-height) - 0.6rem);
padding: 0 0.35rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.35rem;
font-size: 0.8rem;
}
.filter-field-dates em {
font-style: normal;
font-size: 0.8rem;
color: var(--bb-sage-700);
}
/* A multi-select dropdown (e.g. sellers) inside a field. */
.filter-field .dropdown {
min-width: 0;
height: 100%;
}
.filter-field .filter-field-button {
display: block;
max-width: 14rem;
padding-right: 2rem;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
}
.filter-toggles {
display: inline-flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.filter-toggles .filter-chip {
height: var(--filter-height);
padding: 0 0.85rem;
border-radius: 0.5rem;
}
.filter-actions {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-left: auto;
}
.filter-actions .btn {
height: var(--filter-height);
display: inline-flex;
align-items: center;
padding-inline: 0.9rem;
border-radius: 0.5rem;
font-size: 0.875rem;
}
.filter-actions .btn-link {
color: var(--bb-sage-700);
text-decoration: none;
}
.filter-actions .btn-link:hover {
color: var(--bb-blue-700);
text-decoration: underline;
}
@media (max-width: 575.98px) {
.filter-bar {
padding: 0.5rem;
}
.filter-search {
flex-basis: 100%;
}
/* Two fields to a row, each squeezing its dropdown. */
.filter-field {
flex: 1 1 calc(50% - 0.5rem);
}
.filter-field .form-select,
.filter-field .filter-field-button {
flex: 1 1 auto;
}
.filter-field-dates {
flex-basis: 100%;
}
.filter-actions {
flex-basis: 100%;
justify-content: flex-end;
}
}
/* A second, shorter search box (e.g. Country or city). */
.filter-search-narrow {
flex: 0 1 200px;
}
/* ---------- Bulk Upload ---------- */
.bulk-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.bulk-step {
position: relative;
margin-bottom: 0;
padding-top: 1.5rem;
}
.bulk-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
margin-bottom: 0.5rem;
border-radius: 50%;
background: var(--bb-blue-600);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
}
/* ---------- Illustrated covers ----------
Books without a picture show a cover drawn from their title (GeneratedCover),
always tagged so nobody mistakes it for a photo of the book. */
.book-detail-cover {
position: relative;
display: inline-block;
max-width: 100%;
}
.book-detail-cover img {
border-radius: 0.5rem;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}
.cover-not-actual {
position: absolute;
left: 0.5rem;
bottom: 0.5rem;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: rgba(17, 24, 39, 0.78);
color: #fff;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
pointer-events: none;
backdrop-filter: blur(2px);
}
.cover-not-actual-mini {
left: 2px;
right: 2px;
bottom: 2px;
padding: 0 0.2rem;
border-radius: 4px;
font-size: 0.55rem;
text-align: center;
}
/* ---------- Book tiles ----------
A raised card in the site's sage, blue and gold: a coloured strip on top, the
cover drawn as a book standing on a shelf (tilted, with a spine, page edges and
a shadow; it turns to face you on hover), then title, author, rating, badges
and price. .tile-grid-books wraps tiles into rows; .tile-shelf shows one row
that scrolls sideways (home page and catalog shelves). */
.tile-grid-books {
grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
gap: 1rem 0.8rem;
}
.tile-shelf {
--shelf-columns: 8;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--shelf-columns) - 1) * 0.8rem) / var(--shelf-columns));
gap: 0.8rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
/* Room for the raised shadows and the hover lift. */
padding: 0.35rem 0.2rem 0.9rem;
margin: -0.35rem -0.2rem 0;
}
.tile-shelf > .book-tile {
scroll-snap-align: start;
}
.book-tile {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
color: inherit;
text-decoration: none;
background: linear-gradient(180deg, #ffffff 0%, #fbfcf8 55%, var(--bb-sage-50) 100%);
border: 1px solid var(--bb-gold-500);
border-radius: 0.7rem;
overflow: hidden;
transform: translateY(-4px);
box-shadow:
inset 0 1px 0 #ffffff,
0 1px 0 var(--bb-gold-400),
0 4px 0 -1px var(--bb-gold-100),
0 18px 28px -12px rgba(44, 54, 35, 0.45);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.book-tile::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
z-index: 3;
}
.book-tile[data-accent="0"]::before { background: linear-gradient(90deg, var(--bb-blue-600), var(--bb-blue-900)); }
.book-tile[data-accent="1"]::before { background: linear-gradient(90deg, var(--bb-sage-500), var(--bb-sage-700)); }
.book-tile[data-accent="2"]::before { background: linear-gradient(90deg, var(--bb-gold-500), var(--bb-gold-700)); }
.book-tile[data-accent="3"]::before { background: linear-gradient(90deg, var(--bb-blue-700), var(--bb-sage-600)); }
.book-tile:hover,
.book-tile:focus-visible {
transform: none;
border-color: var(--bb-sage-200);
box-shadow:
inset 0 1px 0 #ffffff,
0 1px 0 var(--bb-sage-200),
0 3px 0 -1px var(--bb-sage-100),
0 8px 16px -8px rgba(44, 54, 35, 0.35);
color: inherit;
}
/* The shelf the book stands on. */
.book-tile-cover {
position: relative;
padding: 0.85rem 0.95rem 0.8rem 0.75rem;
background:
linear-gradient(180deg, transparent calc(100% - 0.55rem), rgba(83, 100, 64, 0.22) calc(100% - 0.55rem), rgba(83, 100, 64, 0.08) 100%),
radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--bb-sage-100) 100%);
perspective: 700px;
}
/* The book: facing forward, with a spine on the left and page edges on the right.
It tilts back a little on hover. */
.book-3d {
position: relative;
aspect-ratio: 3 / 4;
border-radius: 2px 5px 5px 2px;
transform: rotateY(0deg) translateY(-2px);
transform-origin: left center;
transform-style: preserve-3d;
box-shadow:
4px 10px 16px -4px rgba(44, 54, 35, 0.5),
3px 0 0 0 #f4f1e8,
4px 0 0 0 #d6d0bf,
6px 0 0 0 #f4f1e8,
7px 0 0 0 #cfc8b4;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.book-3d img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2px 5px 5px 2px;
}
/* Spine shading and a light sheen across the cover. */
.book-3d::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 2px 5px 5px 2px;
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0.12) 5%, rgba(255, 255, 255, 0.22) 7%, rgba(255, 255, 255, 0) 12%),
linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 40%);
pointer-events: none;
}
.book-tile:hover .book-3d,
.book-tile:focus-visible .book-3d {
transform: rotateY(-14deg);
box-shadow:
6px 6px 10px -2px rgba(44, 54, 35, 0.45),
3px 0 0 0 #f4f1e8,
4px 0 0 0 #d6d0bf,
6px 0 0 0 #f4f1e8,
7px 0 0 0 #cfc8b4;
}
.book-3d .cover-not-actual {
z-index: 2;
left: 0.3rem;
bottom: 0.3rem;
font-size: 0.56rem;
padding: 0.05rem 0.35rem;
}
.book-tile-ribbon {
position: absolute;
top: 0.55rem;
left: 0.5rem;
z-index: 4;
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: #dc2626;
color: #fff;
font-size: 0.66rem;
font-weight: 700;
line-height: 1.5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.book-tile-ribbon.is-clearance {
background: var(--bb-gold-500);
color: var(--bb-sage-900);
}
.book-tile-ribbon.is-free {
background: #15803d;
color: #fff;
}
.book-tile-ribbon.is-featured {
left: auto;
right: 0.5rem;
background: var(--bb-gold-500);
color: var(--bb-sage-900);
}
.book-tile.is-sold-out .book-3d img {
filter: grayscale(0.7);
opacity: 0.65;
}
.book-tile-soldout {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
transform: translate(-50%, -50%);
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: rgba(44, 54, 35, 0.88);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
white-space: nowrap;
}
.book-tile-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 0.5rem 0.6rem 0.6rem;
border-top: 1px solid var(--bb-sage-100);
}
.book-tile-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.25;
color: var(--bb-sage-900);
}
.book-tile-author {
margin: 0.1rem 0 0.3rem;
overflow: hidden;
font-size: 0.7rem;
color: var(--bb-sage-700);
text-overflow: ellipsis;
white-space: nowrap;
}
.book-tile .stars {
font-size: 0.72rem;
margin-bottom: 0.25rem;
}
.book-tile .stars-count {
font-size: 0.66rem;
}
.book-tile-sold {
margin: 0 0 0.25rem;
font-size: 0.68rem;
color: var(--bb-sage-700);
}
.book-tile-badges {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
min-width: 0;
}
.book-tile-badges .badge-category {
max-width: 100%;
font-size: 0.62rem;
padding: 0.1rem 0.45rem;
}
.book-tile-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: auto;
padding-top: 0.4rem;
}
.book-tile-price {
font-size: 0.85rem;
font-weight: 800;
color: var(--bb-gold-700);
white-space: nowrap;
}
.book-tile-was {
margin-right: 0.2rem;
font-size: 0.72rem;
font-weight: 400;
color: var(--bb-sage-500);
}
@media (prefers-reduced-motion: reduce) {
.book-tile,
.book-3d {
transition: none;
}
}
@media (max-width: 991.98px) {
.tile-shelf {
--shelf-columns: 5.5;
}
}
@media (max-width: 767.98px) {
.tile-shelf {
--shelf-columns: 3.4;
}
.tile-grid-books {
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
}
@media (max-width: 420px) {
.tile-shelf {
--shelf-columns: 2.4;
}
}
/* ---------- Deals ----------
Each running offer is a card (_DealCard): a coloured band by type (sale red,
clearance gold, bundle blue) with the saving and a fan of its book covers,
then title, seller and action. The home page shows the best few in a row that
scrolls sideways (.deal-row); the Deals page shows them all in a grid
(.deal-grid). */
.deal-card {
--deal-from: #dc2626;
--deal-to: #7f1d1d;
--deal-ink: #ffffff;
--deal-soft: rgba(255, 255, 255, 0.82);
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: #fff;
border: 1px solid var(--bb-sage-200);
border-radius: 0.9rem;
overflow: hidden;
box-shadow:
inset 0 1px 0 #ffffff,
0 1px 0 var(--bb-sage-200),
0 10px 20px -12px rgba(44, 54, 35, 0.45);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.deal-card.is-clearance {
--deal-from: var(--bb-gold-400);
--deal-to: var(--bb-gold-700);
--deal-ink: var(--bb-sage-900);
--deal-soft: rgba(44, 54, 35, 0.8);
}
.deal-card.is-bundle {
--deal-from: var(--bb-blue-600);
--deal-to: var(--bb-blue-900);
}
.deal-card.is-free {
--deal-from: #16a34a;
--deal-to: #14532d;
}
.deal-card:hover,
.deal-card:focus-within {
transform: translateY(-4px);
box-shadow:
inset 0 1px 0 #ffffff,
0 1px 0 var(--bb-gold-400),
0 20px 30px -14px rgba(44, 54, 35, 0.55);
}
.deal-card-hero {
position: relative;
min-height: 8.5rem;
padding: 0.75rem 0.85rem;
overflow: hidden;
color: var(--deal-ink);
background:
radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.22), transparent 45%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 10px, transparent 10px 20px),
linear-gradient(135deg, var(--deal-from), var(--deal-to));
}
.deal-card-top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
}
.deal-card-type {
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--deal-to);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.deal-card.is-clearance .deal-card-type {
color: var(--bb-gold-700);
}
.deal-card-ends {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.22);
color: #fff;
font-size: 0.66rem;
font-weight: 600;
white-space: nowrap;
}
.deal-card-ends.is-soon {
background: #fff;
color: #b91c1c;
}
.deal-card-value {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
max-width: 58%;
margin-top: 0.55rem;
}
.deal-card-big {
font-size: 2.1rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.deal-card-sub {
margin-top: 0.25rem;
font-size: 0.74rem;
color: var(--deal-soft);
}
.deal-card-sub strong {
color: var(--deal-ink);
}
/* A fan of up to four covers on the right, like books spread on a table. */
.deal-card-fan {
position: absolute;
right: 0.6rem;
bottom: -0.9rem;
width: 44%;
height: 7.2rem;
z-index: 1;
}
.deal-card-fan img {
position: absolute;
bottom: 0;
left: calc(var(--i) * (100% - 3.6rem) / max(var(--n) - 1, 1));
width: 3.6rem;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 2px 4px 4px 2px;
box-shadow: -3px 4px 10px rgba(0, 0, 0, 0.35), inset 3px 0 0 rgba(0, 0, 0, 0.15);
transform-origin: bottom center;
transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7deg)) translateY(calc(var(--i) * -2px));
transition: transform 0.25s ease;
}
.deal-card:hover .deal-card-fan img {
transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 11deg)) translateY(calc(var(--i) * -2px - 6px));
}
.deal-card-body {
display: flex;
flex-direction: column;
flex: 1;
gap: 0.15rem;
padding: 0.65rem 0.85rem 0.75rem;
}
.deal-card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.25;
}
/* The whole card opens the offer; the Add to Cart form sits above the link. */
.deal-card-link {
color: var(--bb-sage-900);
text-decoration: none;
}
.deal-card-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
}
.deal-card-seller {
margin: 0;
font-size: 0.72rem;
color: var(--bb-sage-700);
}
.deal-card-books {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0.2rem 0 0;
font-size: 0.72rem;
color: var(--bb-sage-700);
}
.deal-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.55rem;
}
.deal-card-price {
display: flex;
flex-direction: column;
font-size: 0.72rem;
color: var(--bb-sage-500);
line-height: 1.2;
}
.deal-card-save {
font-size: 0.8rem;
font-weight: 800;
color: #15803d;
}
.deal-card-note {
font-size: 0.7rem;
color: var(--bb-sage-600);
}
.deal-card-cta {
font-size: 0.8rem;
font-weight: 700;
color: var(--bb-blue-700);
white-space: nowrap;
}
.deal-card:hover .deal-card-cta {
text-decoration: underline;
}
.deal-card-action {
position: relative;
z-index: 4;
}
/* Home page: Today's Deals. */
.deals-spotlight {
padding: 1.25rem;
border-radius: 1.1rem;
background:
radial-gradient(circle at 0% 0%, rgba(212, 175, 55, 0.18), transparent 40%),
radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.12), transparent 45%),
#fff;
border: 1px solid var(--bb-sage-200);
box-shadow: 0 12px 28px -18px rgba(44, 54, 35, 0.45);
}
.deals-spotlight-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
}
.deals-spotlight-head h2 {
margin: 0.15rem 0 0;
font-size: 1.6rem;
font-weight: 800;
color: var(--bb-sage-900);
}
.deals-spotlight-kicker {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #b91c1c;
}
.deals-pulse {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: #dc2626;
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
animation: deals-pulse 1.8s infinite;
}
@keyframes deals-pulse {
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
70% { box-shadow: 0 0 0 0.55rem rgba(220, 38, 38, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.deals-spotlight-all {
border-radius: 999px;
padding-inline: 1.1rem;
}
.deal-row {
--deal-columns: 4;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--deal-columns) - 1) * 0.9rem) / var(--deal-columns));
gap: 0.9rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
padding: 0.4rem 0.2rem 1rem;
margin: -0.4rem -0.2rem -0.5rem;
}
.deal-row > .deal-card {
scroll-snap-align: start;
}
/* Deals page: all offers. */
.deal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.order-filter-num {
min-width: 1.25rem;
padding: 0 0.35rem;
border-radius: 999px;
background: var(--bb-sage-100);
color: var(--bb-sage-700);
font-size: 0.7rem;
line-height: 1.25rem;
text-align: center;
}
.order-filter a.active .order-filter-num,
.order-filter a:hover .order-filter-num {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
@media (max-width: 991.98px) {
.deal-row {
--deal-columns: 2.6;
}
}
@media (max-width: 575.98px) {
.deal-row {
--deal-columns: 1.3;
}
.deals-spotlight {
padding: 1rem 0.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.deals-pulse {
animation: none;
}
.deal-card,
.deal-card-fan img {
transition: none;
}
}
/* ---------- Offer page ----------
The banner reuses a deal card's colours (.deal-card.is-sale/-clearance/-bundle)
at full width: details on the left, a larger fan of covers on the right. */
.deal-back {
display: inline-block;
margin-bottom: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--bb-sage-700);
text-decoration: none;
}
.deal-back:hover {
color: var(--bb-blue-700);
}
.deal-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
gap: 1rem;
margin-bottom: 2rem;
padding: 1.5rem 1.75rem;
border: 0;
border-radius: 1.1rem;
color: var(--deal-ink);
background:
radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.22), transparent 40%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 12px, transparent 12px 24px),
linear-gradient(135deg, var(--deal-from), var(--deal-to));
box-shadow: 0 20px 40px -24px rgba(44, 54, 35, 0.7);
}
.deal-hero:hover,
.deal-hero:focus-within {
transform: none;
box-shadow: 0 20px 40px -24px rgba(44, 54, 35, 0.7);
}
.deal-hero-main {
position: relative;
z-index: 2;
}
.deal-hero .deal-card-top {
justify-content: flex-start;
gap: 0.5rem;
}
.deal-hero-title {
margin: 0.75rem 0 0.35rem;
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 800;
color: inherit;
}
.deal-hero-value {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.75rem;
}
.deal-hero .deal-card-big {
font-size: clamp(2.5rem, 6vw, 3.6rem);
}
.deal-hero .deal-card-sub {
font-size: 0.95rem;
}
.deal-hero-facts {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
font-size: 0.85rem;
color: var(--deal-soft);
}
.deal-hero-facts strong {
color: var(--deal-ink);
}
.deal-hero-description {
max-width: 40rem;
margin: 0.6rem 0 0;
font-size: 0.9rem;
color: var(--deal-soft);
}
.deal-hero-buy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
margin-top: 1rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
background: rgba(0, 0, 0, 0.18);
}
.deal-hero-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.2rem 0.6rem;
}
.deal-hero-price s {
color: var(--deal-soft);
}
.deal-hero-price strong {
font-size: 1.5rem;
font-weight: 800;
}
.deal-hero-save {
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: #dcfce7;
color: #166534;
font-size: 0.78rem;
font-weight: 700;
}
.deal-hero-note {
font-size: 0.82rem;
color: var(--deal-soft);
}
/* The cover fan, larger and in its own column. */
.deal-hero-fan.deal-card-fan {
position: relative;
right: auto;
bottom: auto;
align-self: end;
width: 100%;
height: 11rem;
margin-bottom: -0.5rem;
}
.deal-hero-fan.deal-card-fan img {
width: 6rem;
left: calc(var(--i) * (100% - 6rem) / max(var(--n) - 1, 1));
}
@media (max-width: 767.98px) {
.deal-hero {
grid-template-columns: 1fr;
padding: 1.25rem;
}
.deal-hero-fan.deal-card-fan {
height: 8rem;
max-width: 18rem;
}
.deal-hero-fan.deal-card-fan img {
width: 4.5rem;
left: calc(var(--i) * (100% - 4.5rem) / max(var(--n) - 1, 1));
}
}
/* ---------- Agent delegation ----------
My Sales Agent (members), Delegated Accounts (agents), Admin > Agent
Delegations, and the bar shown while an agent manages a member's account. */
.notif-kind-delegation {
background: var(--bb-blue-700);
color: #fff;
}
.acting-bar {
position: sticky;
top: 0;
z-index: 1020;
background: linear-gradient(90deg, var(--bb-gold-700), var(--bb-gold-600));
color: #fff;
box-shadow: 0 4px 12px -6px rgba(44, 54, 35, 0.6);
}
.acting-bar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
max-width: 1140px;
margin: 0 auto;
padding: 0.5rem 0.75rem;
}
.acting-bar-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
}
.acting-bar-links {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.acting-bar-links a {
padding: 0.15rem 0.6rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
}
.acting-bar-links a:hover {
background: rgba(255, 255, 255, 0.32);
}
.delegation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
gap: 1rem;
align-items: start;
}
.delegation-person {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.delegation-avatar {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--bb-blue-600), var(--bb-blue-900));
color: #fff;
font-weight: 700;
}
.delegation-scopes {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.delegation-scope {
padding: 0.1rem 0.55rem;
border-radius: 999px;
background: var(--bb-blue-50);
border: 1px solid var(--bb-blue-100);
color: var(--bb-blue-900);
font-size: 0.75rem;
font-weight: 600;
}
.delegation-option {
display: flex;
gap: 0.6rem;
align-items: flex-start;
margin-bottom: 0.5rem;
padding: 0.6rem 0.75rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.6rem;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.delegation-option:hover {
border-color: var(--bb-blue-500);
}
.delegation-option:has(input:checked) {
background: var(--bb-blue-50);
border-color: var(--bb-blue-200);
}
.delegation-option .form-check-input {
margin-top: 0.2rem;
flex-shrink: 0;
}
.delegated-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
gap: 1rem;
}
.delegated-card {
margin-bottom: 0;
}
.delegated-card.is-active {
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 3px var(--bb-blue-100);
}
.min-w-0 {
min-width: 0;
}
.delegation-admin-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.delegation-admin-row {
margin-bottom: 0;
padding: 1rem 1.1rem;
}
.delegation-admin-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.6rem;
}
.delegation-admin-people {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.2fr);
align-items: center;
gap: 0.75rem;
margin-bottom: 0.6rem;
}
.delegation-admin-arrow {
font-size: 1.4rem;
color: var(--bb-sage-500);
}
.delegation-admin-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-top: 0.4rem;
}
.delegation-admin-actions .form-control {
flex: 1 1 16rem;
width: auto;
}
@media (max-width: 767.98px) {
.delegation-admin-people {
grid-template-columns: 1fr;
}
.delegation-admin-arrow {
display: none;
}
}
/* ---------- FAQ ----------
A hero with the search box, audience tabs, a sticky list of sections, and
each question as a that opens in place. */
.faq-hero {
margin: 0.5rem 0 1rem;
padding: 2rem 1.5rem;
border-radius: 1.1rem;
text-align: center;
background:
radial-gradient(circle at 10% 10%, rgba(212, 175, 55, 0.2), transparent 40%),
radial-gradient(circle at 90% 90%, rgba(37, 99, 235, 0.14), transparent 45%),
#fff;
border: 1px solid var(--bb-sage-200);
box-shadow: 0 12px 28px -20px rgba(44, 54, 35, 0.45);
}
.faq-kicker {
margin: 0 0 0.25rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bb-blue-700);
}
.faq-hero h1 {
margin: 0;
font-size: clamp(1.7rem, 4vw, 2.4rem);
font-weight: 800;
color: var(--bb-sage-900);
}
.faq-lead {
max-width: 36rem;
margin: 0.5rem auto 1.25rem;
color: var(--bb-sage-700);
}
.faq-search {
position: relative;
max-width: 34rem;
margin: 0 auto;
}
.faq-search svg {
position: absolute;
left: 1rem;
top: 50%;
width: 1.15rem;
height: 1.15rem;
transform: translateY(-50%);
color: var(--bb-sage-600);
pointer-events: none;
}
.faq-search input {
width: 100%;
padding: 0.8rem 1rem 0.8rem 2.8rem;
border: 1px solid var(--bb-sage-200);
border-radius: 999px;
background: #fff;
font-size: 1rem;
box-shadow: 0 4px 14px -8px rgba(44, 54, 35, 0.35);
}
.faq-search input:focus {
outline: none;
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 4px var(--bb-blue-100);
}
.faq-tabs {
justify-content: center;
margin-bottom: 1.25rem;
}
.faq-layout {
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
.faq-toc {
position: sticky;
top: 1rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.75rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.9rem;
background: #fff;
}
.faq-toc a {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--bb-sage-900);
text-decoration: none;
}
.faq-toc a:hover {
background: var(--bb-sage-50);
color: var(--bb-blue-700);
}
.faq-toc a span {
color: var(--bb-sage-500);
font-weight: 500;
}
.faq-section {
margin-bottom: 1.75rem;
scroll-margin-top: 1rem;
}
.faq-section-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.faq-section-head h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 800;
color: var(--bb-sage-900);
}
.faq-section-head p {
margin: 0;
font-size: 0.85rem;
color: var(--bb-sage-700);
}
.faq-section-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
background: linear-gradient(135deg, var(--bb-blue-600), var(--bb-blue-900));
color: #fff;
box-shadow: 0 6px 12px -6px rgba(29, 78, 216, 0.6);
}
.faq-section-icon svg {
width: 1.25rem;
height: 1.25rem;
}
.faq-item {
margin-bottom: 0.5rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.75rem;
background: #fff;
scroll-margin-top: 6rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-item[open] {
border-color: var(--bb-blue-200);
box-shadow: 0 8px 20px -14px rgba(29, 78, 216, 0.5);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
font-weight: 650;
color: var(--bb-sage-900);
cursor: pointer;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
color: var(--bb-blue-700);
}
.faq-chevron {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
color: var(--bb-sage-500);
transition: transform 0.2s ease;
}
.faq-item[open] .faq-chevron {
transform: rotate(180deg);
color: var(--bb-blue-600);
}
.faq-answer {
padding: 0 1rem 1rem;
font-size: 0.93rem;
line-height: 1.6;
color: var(--bb-sage-900);
}
.faq-answer ul {
padding-left: 1.2rem;
}
.faq-answer li {
margin-bottom: 0.2rem;
}
.faq-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 1rem 0 2rem;
padding: 1.5rem 1.75rem;
border-radius: 1.1rem;
color: #fff;
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 12px, transparent 12px 24px),
linear-gradient(135deg, var(--bb-blue-700), var(--bb-blue-900));
}
.faq-cta h2 {
margin: 0 0 0.2rem;
font-size: 1.3rem;
font-weight: 800;
color: #fff;
}
.faq-cta p {
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 991.98px) {
.faq-layout {
grid-template-columns: 1fr;
}
.faq-toc {
display: none;
}
}
/* ---------- Deal cards: compact size ----------
The same card, scaled down for the home page row and the Deals grid so more
offers fit as their number grows. The offer page banner keeps its full size. */
.deal-row,
.deal-grid {
--fan-cover: 2.7rem;
}
.deal-row {
--deal-columns: 6;
gap: 0.75rem;
grid-auto-columns: calc((100% - (var(--deal-columns) - 1) * 0.75rem) / var(--deal-columns));
}
.deal-grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
gap: 0.8rem;
}
:is(.deal-row, .deal-grid) .deal-card {
border-radius: 0.75rem;
}
:is(.deal-row, .deal-grid) .deal-card-hero {
min-height: 6.4rem;
padding: 0.55rem 0.6rem;
}
:is(.deal-row, .deal-grid) .deal-card-type,
:is(.deal-row, .deal-grid) .deal-card-ends {
padding: 0.05rem 0.4rem;
font-size: 0.56rem;
}
:is(.deal-row, .deal-grid) .deal-card-ends svg {
width: 10px;
height: 10px;
}
:is(.deal-row, .deal-grid) .deal-card-value {
margin-top: 0.4rem;
max-width: 60%;
}
:is(.deal-row, .deal-grid) .deal-card-big {
font-size: 1.55rem;
}
:is(.deal-row, .deal-grid) .deal-card-sub {
margin-top: 0.15rem;
font-size: 0.64rem;
line-height: 1.25;
}
:is(.deal-row, .deal-grid) .deal-card-fan {
right: 0.45rem;
bottom: -0.7rem;
height: 5.4rem;
}
:is(.deal-row, .deal-grid) .deal-card-fan img {
width: var(--fan-cover);
left: calc(var(--i) * (100% - var(--fan-cover)) / max(var(--n) - 1, 1));
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.35), inset 2px 0 0 rgba(0, 0, 0, 0.15);
}
:is(.deal-row, .deal-grid) .deal-card-body {
padding: 0.5rem 0.6rem 0.55rem;
gap: 0.1rem;
}
:is(.deal-row, .deal-grid) .deal-card-title {
font-size: 0.8rem;
}
:is(.deal-row, .deal-grid) .deal-card-seller,
:is(.deal-row, .deal-grid) .deal-card-books {
font-size: 0.66rem;
}
:is(.deal-row, .deal-grid) .deal-card-footer {
gap: 0.35rem;
padding-top: 0.4rem;
}
:is(.deal-row, .deal-grid) .deal-card-price,
:is(.deal-row, .deal-grid) .deal-card-note {
font-size: 0.64rem;
}
/* The general hint is dropped at this size; the "View books" link says enough. */
:is(.deal-row, .deal-grid) .deal-card-hint {
display: none;
}
:is(.deal-row, .deal-grid) .deal-card-footer {
justify-content: flex-end;
}
:is(.deal-row, .deal-grid) .deal-card-price + * {
margin-left: auto;
}
:is(.deal-row, .deal-grid) .deal-card-save,
:is(.deal-row, .deal-grid) .deal-card-cta {
font-size: 0.72rem;
}
:is(.deal-row, .deal-grid) .deal-card-action .btn {
padding: 0.15rem 0.45rem;
font-size: 0.68rem;
}
@media (max-width: 991.98px) {
.deal-row {
--deal-columns: 3.5;
}
}
@media (max-width: 575.98px) {
.deal-row {
--deal-columns: 2.2;
}
.deal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---------- Digital (PDF) books ---------- */
.badge-pdf {
color: #fff;
background: linear-gradient(135deg, #b91c1c, #dc2626);
}
/* Sell a Book / Manage Books: printed copies or a PDF. */
.book-format {
padding: 0.9rem 1rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.75rem;
background: #fbfcf8;
}
.book-format legend {
float: none;
width: auto;
font-size: 1rem;
font-weight: 600;
}
.book-format-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 0.6rem;
}
.book-format-option {
display: flex;
gap: 0.6rem;
align-items: flex-start;
padding: 0.7rem 0.85rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.6rem;
background: #fff;
cursor: pointer;
}
.book-format-option:has(input:checked) {
border-color: var(--bb-blue-500);
box-shadow: 0 0 0 3px var(--bb-blue-100);
}
.book-format-option input {
margin-top: 0.3rem;
}
.book-format-option strong {
display: block;
font-size: 0.92rem;
color: var(--bb-sage-900);
}
.book-format-option small {
color: #6b7280;
}
.buy-box-digital {
border-color: #fecaca;
background: linear-gradient(135deg, #fff, #fef2f2);
}
.digital-checkout {
padding: 0.75rem 0.9rem;
border-radius: 0.6rem;
background: #fef2f2;
}
/* My Library */
.library-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
}
.library-item {
display: flex;
gap: 1rem;
padding: 0.85rem;
border-radius: 0.9rem;
background: #fff;
box-shadow: 0 8px 24px -18px rgba(44, 54, 35, 0.45);
}
.library-cover img {
width: 84px;
height: 112px;
object-fit: cover;
border-radius: 0.4rem;
box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.45);
}
.library-body {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.library-title {
font-weight: 700;
color: var(--bb-sage-900);
text-decoration: none;
}
.library-title:hover {
color: var(--bb-blue-700);
}
/* Blog notifications (posts waiting for approval, decisions for writers). */
.notif-kind-blog {
background: var(--bb-gold-100);
color: var(--bb-gold-700);
}
/* BooksShore Buddies: the header's chat button and the toast chat.js shows on
every page (the Chat page itself is chat.css). */
.chat-btn {
position: relative;
}
.bc-toast {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 1080;
max-width: min(24rem, calc(100vw - 2.5rem));
padding: 0.8rem 1rem;
border-radius: 1rem;
background: #0f172a;
color: #fff;
font-size: 0.9rem;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
}
.bc-toast a {
color: #fff;
text-decoration: none;
}
.bc-toast a:hover {
text-decoration: underline;
}
.notif-kind-poll {
background: var(--bb-blue-50);
color: var(--bb-blue-700);
}
.notif-kind-alert {
background: #fce7f3;
color: #9d174d;
}
.notif-kind-exchange {
background: #dcfce7;
color: #166534;
}
.notif-kind-wave {
background: #e0f2fe;
color: #075985;
}
.notif-kind-find {
background: #ffedd5;
color: #9a3412;
}
/* Home page: the writers' compact band, under the smaller articles beside the
main one (full width only while there are no articles). */
.write-strip {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem 1.25rem;
margin: 0 0 2.75rem;
padding: 1rem 1.5rem;
border-radius: 0.85rem;
background: linear-gradient(135deg, var(--bb-gold-100) 0%, var(--bb-sage-50) 55%, var(--bb-blue-50) 100%);
}
/* Beside the main article it's one of the small tiles: icon, words and buttons
one under another. */
.home-blog-list .write-strip {
grid-template-columns: minmax(0, 1fr);
align-content: center;
justify-items: start;
margin: 0;
padding: 1.1rem 1.15rem;
border-radius: 0.9rem;
}
.home-blog-list .write-strip-copy h2 {
font-size: 1.1rem;
}
.home-blog-list .write-strip-copy p {
font-size: 0.84rem;
}
.write-strip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: #fff;
border: 2px solid var(--bb-gold-500);
color: var(--bb-gold-600);
}
.write-strip-icon svg {
width: 1.4rem;
height: 1.4rem;
}
.write-strip-copy .hero-eyebrow {
margin-bottom: 0.1rem;
}
.write-strip-copy h2 {
margin: 0 0 0.15rem;
font-size: 1.25rem;
font-weight: 800;
color: var(--bb-sage-900);
}
.write-strip-copy p {
margin: 0;
font-size: 0.88rem;
color: var(--bb-sage-700);
}
.write-strip-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
@media (max-width: 767.98px) {
.write-strip {
grid-template-columns: auto minmax(0, 1fr);
padding: 1rem;
}
.write-strip-actions {
grid-column: 1 / -1;
}
}
/* Home page: Poetry of the Day and Quote of the Day in one row. */
.home-daily-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 1.25rem;
align-items: start;
}
.home-daily-grid .poem-card {
padding: 1.25rem 1.25rem 1rem;
}
/* Home page: Deals, Top Rated and Recommended side by side, each a short
sideways-scrolling row. */
.home-trio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 1.25rem;
}
.home-trio-panel {
min-width: 0;
padding: 1rem;
border: 1px solid var(--bb-sage-200);
border-radius: 1rem;
background: #fff;
}
.home-trio-panel .section-header {
flex-wrap: nowrap;
margin-bottom: 0.75rem;
}
.home-trio-panel .section-header h2 {
font-size: 1.1rem;
}
/* Columns follow each panel's own width, so covers stay the size of the other
shelves on the page when a panel is missing and the rest grow wider (e.g. a
seller whose own deals are the only ones running sees no Deals panel). */
.home-trio-panel {
container-type: inline-size;
}
.home-trio .tile-shelf {
--shelf-columns: 2.5;
}
.home-trio .deal-row {
--deal-columns: 2.2;
}
@container (min-width: 480px) {
.home-trio .tile-shelf { --shelf-columns: 3.4; }
.home-trio .deal-row { --deal-columns: 3; }
}
@container (min-width: 560px) {
.home-trio .tile-shelf { --shelf-columns: 3.9; }
}
@container (min-width: 700px) {
.home-trio .tile-shelf { --shelf-columns: 4.8; }
.home-trio .deal-row { --deal-columns: 4.2; }
}
@container (min-width: 850px) {
.home-trio .tile-shelf { --shelf-columns: 5.8; }
}
@container (min-width: 1000px) {
.home-trio .tile-shelf { --shelf-columns: 6.8; }
.home-trio .deal-row { --deal-columns: 5.5; }
}
@container (min-width: 1120px) {
.home-trio .tile-shelf { --shelf-columns: 7.8; }
}
/* ---------- My Account menu (header) ----------
Profile with Sign Out, four shortcuts, then the groups packed into columns
(CSS columns, so groups of different lengths fill the space instead of
leaving gaps), keeping the menu short. */
.account-menu {
width: 660px;
max-width: calc(100vw - 24px);
max-height: calc(100vh - 90px);
overflow-y: auto;
padding: 0;
border: 1px solid var(--bb-sage-200);
border-radius: 0.9rem;
box-shadow: 0 18px 40px -16px rgba(30, 58, 138, 0.35);
}
.account-menu-profile {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.7rem 0.9rem;
background: linear-gradient(135deg, var(--bb-blue-900), var(--bb-blue-600));
color: #fff;
}
.account-menu-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
flex-shrink: 0;
border-radius: 50%;
background: var(--bb-gold-500);
color: var(--bb-blue-900);
font-size: 1.1rem;
font-weight: 800;
}
.account-menu-who {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.account-menu-who strong {
font-size: 0.98rem;
}
.account-menu-who span {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-menu-who .account-menu-id {
color: var(--bb-gold-400);
font-weight: 600;
}
.account-menu-signout {
flex-shrink: 0;
margin: 0;
}
.account-menu-signout button {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
}
.account-menu-signout button:hover,
.account-menu-signout button:focus-visible {
border-color: #fca5a5;
background: #fef2f2;
color: #b91c1c;
}
.account-menu-signout svg {
width: 15px;
height: 15px;
}
.account-menu-quick {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.45rem;
padding: 0.55rem 0.75rem;
border-bottom: 1px solid var(--bb-sage-200);
background: var(--bb-sage-50);
}
.account-menu-quick a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.4rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.55rem;
background: #fff;
color: var(--bb-sage-900);
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: border-color 0.15s ease, color 0.15s ease;
}
.account-menu-quick a:hover {
border-color: var(--bb-blue-500);
color: var(--bb-blue-700);
}
.account-menu-quick svg {
width: 17px;
height: 17px;
flex-shrink: 0;
color: var(--bb-blue-600);
}
.account-menu-groups {
columns: 3;
column-gap: 0.4rem;
padding: 0.45rem 0.45rem 0.35rem;
}
.account-menu-group {
break-inside: avoid;
padding-bottom: 0.35rem;
}
.account-menu-group h6 {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0.15rem 0 0.05rem;
padding: 0.2rem 0.55rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bb-blue-700);
}
.account-menu-group h6 svg {
width: 13px;
height: 13px;
color: var(--bb-gold-600);
}
.account-menu-group .dropdown-item {
padding: 0.22rem 0.55rem;
border-radius: 0.4rem;
font-size: 0.86rem;
white-space: normal;
}
@media (max-width: 767.98px) {
.account-menu-groups {
columns: 2;
}
}
@media (max-width: 420px) {
.account-menu-quick a {
flex-direction: column;
gap: 0.2rem;
font-size: 0.75rem;
}
.account-menu-signout button {
padding: 0.35rem 0.55rem;
}
}
/* ---------- Help & Info menu (header) ----------
About, FAQ, support, the community map and privacy, each with a line on what it is. */
.info-menu {
width: 300px;
white-space: normal;
max-width: calc(100vw - 24px);
padding: 0.35rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.9rem;
box-shadow: 0 18px 40px -16px rgba(30, 58, 138, 0.35);
}
.info-menu-item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.5rem 0.6rem;
border-radius: 0.6rem;
color: var(--bb-sage-900);
text-decoration: none;
}
.info-menu-item:hover,
.info-menu-item:focus-visible {
background: var(--bb-sage-50);
color: var(--bb-blue-700);
}
.info-menu-item svg {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 0.1rem;
color: var(--bb-blue-600);
}
.info-menu-item span {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.info-menu-item strong {
font-size: 0.9rem;
}
.info-menu-item small {
color: var(--bb-sage-700);
font-size: 0.78rem;
}
/* ---------- Book tags (book page; link to the catalog filtered by tag) ---------- */
.book-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.book-tag {
padding: 0.15rem 0.6rem;
border-radius: 999px;
background: var(--bb-sage-100);
color: var(--bb-sage-700);
font-size: 0.85rem;
text-decoration: none;
}
.book-tag:hover {
background: var(--bb-sage-200);
color: var(--bb-sage-900);
}
/* Matching Cover window (My Listings and Manage Books): a fanned row of previews. */
.matching-cover-preview {
display: flex;
justify-content: center;
align-items: flex-end;
min-height: 150px;
margin: 0.25rem 0 1rem;
padding: 0.75rem;
border-radius: 0.75rem;
background: var(--bb-sage-50);
}
.matching-cover-preview img {
width: 96px;
height: 128px;
margin: 0 6px;
border-radius: 4px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
transform: rotate(calc((var(--i) - 1) * 6deg)) translateY(calc(var(--i) * 2px));
transition: transform 0.2s ease;
}
.matching-cover-preview img:only-child {
transform: none;
}
.matching-cover-preview img:hover {
z-index: 1;
transform: translateY(-6px) scale(1.05);
}
/* ---------- My Profile (Account/Profile) ---------- */
.profile-page {
max-width: 1040px;
margin: 1.75rem auto 3rem;
}
.profile-head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
}
.profile-avatar {
display: grid;
flex-shrink: 0;
place-items: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--bb-blue-600), var(--bb-sage-600));
color: #fff;
font-size: 1.35rem;
font-weight: 800;
}
.profile-head-text { min-width: 0; }
.profile-head h1 { margin: 0; color: var(--bb-sage-900); font-size: 1.6rem; font-weight: 800; }
.profile-head p { margin: 0.2rem 0 0; color: var(--bb-sage-700); font-size: 0.88rem; overflow-wrap: anywhere; }
.profile-complete {
margin-bottom: 1.25rem;
padding: 1rem 1.2rem;
border: 1px solid var(--bb-gold-400);
border-radius: 0.85rem;
background: #fffbeb;
}
.profile-complete-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.profile-complete h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.profile-complete-top span { color: var(--bb-gold-700); font-size: 0.85rem; font-weight: 700; }
.profile-complete .progress { height: 0.5rem; background: #fef3c7; }
.profile-complete .progress-bar { background: var(--bb-gold-500); }
.profile-complete p { margin: 0.6rem 0 0.4rem; color: #78350f; font-size: 0.88rem; }
.profile-complete ul {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.profile-complete li a {
display: inline-block;
padding: 0.2rem 0.7rem;
border: 1px solid var(--bb-gold-400);
border-radius: 999px;
background: #fff;
color: #92400e;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
}
.profile-complete li a:hover { background: var(--bb-gold-100); }
.profile-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
align-items: start;
gap: 1.25rem;
}
.profile-side {
display: grid;
gap: 1.25rem;
}
.profile-card {
padding: 1.4rem 1.5rem;
border-top: 4px solid var(--bb-gold-500);
border-radius: 0.75rem;
background: #fff;
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.08);
}
.profile-side .profile-card { border-top-color: var(--bb-sage-300); }
.profile-card h2 { margin: 0 0 0.75rem; color: var(--bb-sage-900); font-size: 1.1rem; font-weight: 800; }
.profile-side .profile-card p { font-size: 0.9rem; }
@media (max-width: 900px) {
.profile-layout { grid-template-columns: 1fr; }
}
/* ---------- Continue with Google / Facebook (Views/Account/_ExternalSignInButtons) ---------- */
.external-signin {
display: grid;
gap: 0.6rem;
}
/* Facebook's own blue and white "f", as its branding guidelines ask. */
.facebook-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
border: 1px solid #1877f2;
border-radius: 0.5rem;
background: #1877f2;
color: #fff;
font-weight: 600;
}
.facebook-btn:hover,
.facebook-btn:focus {
border-color: #166fe5;
background: #166fe5;
color: #fff;
box-shadow: 0 1px 3px rgba(24, 119, 242, 0.35);
}
.facebook-btn-mark {
flex: none;
}
.google-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
border: 1px solid #dadce0;
border-radius: 0.5rem;
background: #fff;
color: #1f1f1f;
font-weight: 600;
}
.google-btn:hover,
.google-btn:focus {
border-color: #c6c9ce;
background: #f8f9fa;
color: #1f1f1f;
box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}
.google-btn-mark {
flex: none;
}
.auth-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.1rem 0;
color: #6b7280;
font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: #e5e7eb;
}
/* ---------- Back to top (_BackToTop, on every page) ----------
Floats in once the reader is well down the page; the ring around it fills
with how far through they are (site.js). */
.to-top {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 1070;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
padding: 0;
border: none;
border-radius: 50%;
color: #fff;
background: var(--bb-sage-700);
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.22);
cursor: pointer;
opacity: 0;
transform: translateY(0.75rem) scale(0.9);
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
pointer-events: none;
}
.to-top.is-visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
.to-top:hover {
background: var(--bb-sage-900);
}
.to-top:hover .to-top-arrow {
transform: translateY(-2px);
}
.to-top:focus-visible {
outline: 3px solid var(--bb-gold-400);
outline-offset: 3px;
}
.to-top-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.to-top-ring circle {
fill: none;
stroke-width: 3;
stroke: rgba(255, 255, 255, 0.2);
}
.to-top-ring circle + circle {
stroke: var(--bb-gold-400);
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.to-top-arrow {
position: relative;
transition: transform 0.15s ease;
}
@media (max-width: 575.98px) {
.to-top {
right: 1rem;
bottom: 1rem;
width: 2.75rem;
height: 2.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.to-top,
.to-top-arrow {
transition: none;
}
}
@media print {
.to-top {
display: none !important;
}
}
/* The chat popup sits in the same corner; the button steps aside while it's open. */
body:has(.cw:not([hidden])) .to-top {
display: none;
}
main h1:focus {
outline: none;
}
/* ---------- Book page: Add to my shore ---------- */
.shore-addbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.65rem 0.85rem;
border: 1px solid var(--bb-sage-200);
border-radius: 0.8rem;
background: linear-gradient(120deg, #fff1db, #fff);
}
.shore-addbar strong {
margin-right: 0.25rem;
color: var(--bb-sage-900);
font-size: 0.9rem;
}
.shore-addbar .btn[aria-pressed="true"] {
background: var(--bb-blue-600);
border-color: var(--bb-blue-600);
color: #fff;
}
.shore-addbar a {
margin-left: auto;
font-size: 0.85rem;
font-weight: 700;
}
/* ---------- Add to my shore (blog posts, Spiritual Reads, polls, quotes) ----------
Views/Shore/_ShorePin: shows the item on the member's Reading Shore. */
.shore-pin {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.75rem;
margin-top: 0.75rem;
}
.shore-pin form {
margin: 0;
}
.shore-pin-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.38rem 0.9rem;
border: 1px solid var(--bb-sage-300);
border-radius: 999px;
background: #fff;
color: var(--bb-sage-900);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
}
.shore-pin-btn:hover {
border-color: var(--bb-blue-500);
color: var(--bb-blue-700);
}
.shore-pin-btn.is-on {
border-color: var(--bb-sage-600);
background: var(--bb-sage-600);
color: #fff;
}
/* "Share as a wave" (Waves/_ShareAsWave) on books, blog posts, Spiritual Reads,
poems and quotes. */
.wave-share {
margin-top: 0.75rem;
}
.wave-share-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.38rem 0.95rem;
border: 1px solid var(--bb-blue-200);
border-radius: 999px;
background: var(--bb-blue-50);
color: var(--bb-blue-700);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
}
.wave-share-btn:hover {
border-color: var(--bb-blue-500);
background: #fff;
color: var(--bb-blue-700);
}
.shore-pin-btn.is-on:hover {
border-color: #b91c1c;
background: #fef2f2;
color: #b91c1c;
}
.shore-pin-note {
color: var(--bb-sage-700);
font-size: 0.85rem;
}
/* ---------- Home page: My Reading Shore banner (Views/Shore/_HomeBanner) ----------
A sunrise-to-lagoon sky with waves along the bottom, the copy on the left and a
little shore with its bookshelf on the right. */
.shore-banner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: center;
gap: 1.5rem 2rem;
margin: 1.75rem 0;
padding: 2.25rem 2.25rem 3.75rem;
border-radius: 1.4rem;
background:
radial-gradient(circle at 88% 12%, rgba(255, 210, 122, 0.55), transparent 32%),
linear-gradient(120deg, #fff1db 0%, #fbd3c0 38%, #c9efe9 100%);
overflow: hidden;
}
.shore-banner-copy,
.shore-banner-art {
position: relative;
z-index: 1;
min-width: 0;
}
.shore-banner-eyebrow {
display: inline-block;
margin-bottom: 0.6rem;
padding: 0.25rem 0.8rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.75);
color: #9a4a26;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.shore-banner h2 {
margin: 0 0 0.6rem;
color: #2b2018;
font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.4rem);
font-weight: 800;
line-height: 1.12;
text-wrap: balance;
}
.shore-banner p {
max-width: 40rem;
margin: 0 0 1rem;
color: #5b4537;
font-size: 1.03rem;
}
.shore-banner-chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0 0 1.25rem;
padding: 0;
list-style: none;
}
.shore-banner-chips li {
padding: 0.3rem 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
color: #2b2018;
font-size: 0.86rem;
font-weight: 700;
}
.shore-banner-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.shore-banner-btn {
border: 0;
background: linear-gradient(135deg, #d4683a, #c2410c);
box-shadow: 0 10px 22px -10px rgba(194, 65, 12, 0.7);
color: #fff;
font-weight: 800;
}
.shore-banner-btn:hover,
.shore-banner-btn:focus {
background: linear-gradient(135deg, #c2410c, #9a3412);
color: #fff;
}
.shore-banner-btn-alt {
border: 2px solid #2b2018;
background: rgba(255, 255, 255, 0.55);
color: #2b2018;
font-weight: 700;
}
.shore-banner-btn-alt:hover,
.shore-banner-btn-alt:focus {
background: #2b2018;
color: #fff;
}
.shore-banner-proof {
margin: 1rem 0 0 !important;
font-size: 0.9rem !important;
font-weight: 600;
}
.shore-banner-proof a {
color: #127373;
font-weight: 800;
}
.shore-banner-svg {
display: block;
width: 100%;
max-width: 420px;
height: auto;
margin-left: auto;
filter: drop-shadow(0 18px 26px rgba(43, 32, 24, 0.18));
}
.shore-banner-books {
transform-origin: 190px 248px;
animation: shore-banner-settle 0.9s ease-out both;
}
@keyframes shore-banner-settle {
from { transform: translateY(-10px); opacity: 0.6; }
to { transform: none; opacity: 1; }
}
.shore-banner-wave {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 70px;
}
/* Compact: about half the original height, with a smaller picture. */
.shore-banner {
grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
gap: 1rem 1.5rem;
margin: 0 0 2.75rem;
padding: 1.25rem 1.75rem 2.25rem;
}
.shore-banner-eyebrow {
margin-bottom: 0.4rem;
font-size: 0.7rem;
}
.shore-banner h2 {
margin-bottom: 0.5rem;
font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
}
.shore-banner-chips {
margin-bottom: 0.75rem;
}
.shore-banner-chips li {
padding: 0.2rem 0.65rem;
font-size: 0.78rem;
}
.shore-banner-proof {
margin-top: 0.6rem !important;
font-size: 0.82rem !important;
}
.shore-banner-svg {
max-width: 220px;
}
.shore-banner-wave {
height: 34px;
}
@media (max-width: 767.98px) {
.shore-banner {
grid-template-columns: minmax(0, 1fr);
padding: 1.25rem 1.1rem 2.25rem;
}
.shore-banner-art {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.shore-banner-books {
animation: none;
}
}
/* ---------- Book alerts: the "Alert me" card on searches and sold-out book pages ---------- */
.ba-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.25rem;
align-items: center;
margin: 1rem 0 1.5rem;
padding: 1.5rem 1.75rem;
border-radius: 1.25rem;
color: #fff;
background:
radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.22), transparent 40%),
linear-gradient(135deg, #be185d, #7c3aed 55%, #1e3a8a);
box-shadow: 0 16px 36px rgba(124, 58, 237, 0.22);
overflow: hidden;
}
.ba-bell {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
font-size: 2rem;
animation: ba-ring 2.6s ease-in-out infinite;
transform-origin: 50% 20%;
}
@keyframes ba-ring {
0%, 70%, 100% { transform: rotate(0); }
75% { transform: rotate(14deg); }
80% { transform: rotate(-12deg); }
85% { transform: rotate(8deg); }
90% { transform: rotate(-4deg); }
}
.ba-text h2 {
margin: 0 0 0.3rem;
color: #fff;
font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
font-weight: 800;
overflow-wrap: anywhere;
}
.ba-text p {
margin: 0;
color: rgba(255, 255, 255, 0.9);
}
.ba-actions {
display: grid;
gap: 0.4rem;
justify-items: center;
}
.ba-actions .btn-light {
color: #6d28d9;
white-space: nowrap;
}
.ba-signin {
font-size: 0.82rem;
}
.ba-signin a {
color: #fff;
font-weight: 700;
}
.ba-strip {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1rem;
align-items: center;
justify-content: space-between;
margin: 0 0 1rem;
padding: 0.65rem 1rem;
border: 1px dashed #c4b5fd;
border-radius: 0.8rem;
background: #faf5ff;
color: #4c1d95;
font-size: 0.92rem;
}
.ba-strip-text {
overflow-wrap: anywhere;
}
.ba-done {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
margin: 0.5rem 0 1rem;
padding: 0.75rem 1rem;
border-radius: 0.8rem;
background: #ecfdf5;
color: #065f46;
font-weight: 600;
}
.ba-done a {
margin-left: auto;
color: #047857;
}
@media (max-width: 767.98px) {
.ba-card {
grid-template-columns: 1fr;
justify-items: start;
padding: 1.25rem;
}
.ba-bell {
width: 3.2rem;
height: 3.2rem;
font-size: 1.6rem;
}
.ba-actions {
justify-items: stretch;
width: 100%;
}
.ba-actions .btn-light {
white-space: normal;
}
}
@media (prefers-reduced-motion: reduce) {
.ba-bell {
animation: none;
}
}
/* Sell a Book: the searches readers have alerts for (BookAlertService.MostWantedAsync). */
.wanted-card {
position: sticky;
top: 1rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
border-radius: 1rem;
color: #fff;
background:
radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.2), transparent 40%),
linear-gradient(150deg, #7c3aed, #be185d);
}
.wanted-card h2 {
margin: 0 0 0.35rem;
color: #fff;
font-size: 1.15rem;
font-weight: 800;
}
.wanted-card p {
margin: 0 0 0.85rem;
color: rgba(255, 255, 255, 0.88);
font-size: 0.88rem;
}
.wanted-list {
display: grid;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.wanted-list a {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.7rem;
border-radius: 0.6rem;
background: rgba(255, 255, 255, 0.14);
color: #fff;
text-decoration: none;
transition: background-color 0.15s ease;
}
.wanted-list a:hover {
background: rgba(255, 255, 255, 0.25);
}
.wanted-title {
min-width: 0;
font-weight: 700;
overflow-wrap: anywhere;
}
.wanted-count {
flex: none;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: #fff;
color: #7c3aed;
font-size: 0.75rem;
font-weight: 800;
}
/* Helpers from Bootstrap 5.2/5.3 that the pages use but our Bootstrap 5.1 lacks.
Without them a .badge keeps 5.1's white text with no background, which can't
be read on a light page. Colours as in Bootstrap 5.2. */
.text-bg-primary { color: #fff !important; background-color: #0d6efd !important; }
.text-bg-secondary { color: #fff !important; background-color: #6c757d !important; }
.text-bg-success { color: #fff !important; background-color: #198754 !important; }
.text-bg-danger { color: #fff !important; background-color: #dc3545 !important; }
.text-bg-warning { color: #212529 !important; background-color: #ffc107 !important; }
.text-bg-info { color: #212529 !important; background-color: #0dcaf0 !important; }
.text-bg-light { color: #212529 !important; background-color: #f8f9fa !important; }
.text-bg-dark { color: #fff !important; background-color: #212529 !important; }
.bg-danger-subtle { background-color: #f8d7da !important; }
.border-danger-subtle { border-color: #f1aeb5 !important; }
.fw-semibold { font-weight: 600 !important; }
/* ---------- City picker (sign-up and address forms) ---------- */
/* A search box over the hidden city