/* User-selected and system dark mode. */
html[data-theme="dark"] {
--color-ink: #f4f7fb;
--color-ink-soft: #d2d9e4;
--color-muted: #9da8b8;
--color-canvas: #0e131c;
--color-surface: #151c27;
--color-surface-2: #202936;
--color-border: #2d3745;
--shadow-sm: 0 4px 18px rgba(0, 0, 0, .2);
--shadow-md: 0 16px 45px rgba(0, 0, 0, .3);
--shadow-lg: 0 30px 80px rgba(0, 0, 0, .45);
color-scheme: dark;
}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .breaking-bar,
html[data-theme="dark"] .category-highlights {
background: var(--color-surface);
}
html[data-theme="dark"] .search-form__input {
color: var(--color-ink);
}
html[data-theme="dark"] .page-hero {
background:
radial-gradient(circle at 90% 10%, rgba(226, 29, 47, .25), transparent 34%),
linear-gradient(135deg, #0a0e15, #161f2c);
}
html[data-theme="dark"] .single-article__featured-image,
html[data-theme="dark"] .story-card__image,
html[data-theme="dark"] .story-list-item__image,
html[data-theme="dark"] .hero-story__image {
filter: brightness(.92);
}
/* =========================================================
JKM BOOKS SECTION
Premium Editorial / Author Publishing Design
Version 2.0
========================================================= */
.books-heading,
.books-grid,
.books-footer {
width: 100%;
box-sizing: border-box;
}
/* =========================================================
SECTION HEADER
========================================================= */
.books-heading {
display: grid;
grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
align-items: center;
column-gap: 70px;
margin-bottom: 48px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(20, 20, 20, 0.10);
}
/* Eyebrow */
.books-eyebrow {
display: inline-flex;
align-items: center;
gap: 11px;
margin-bottom: 13px;
font-family: "Poppins", sans-serif;
font-size: 12px;
line-height: 1;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #b88935;
}
.books-eyebrow::before {
content: "";
width: 37px;
height: 2px;
flex: 0 0 37px;
background: #b88935;
}
/* Main heading */
.books-heading h2 {
margin: 0;
max-width: 760px;
font-family:
"Noto Sans Devanagari",
"Poppins",
sans-serif;
font-size: clamp(36px, 4vw, 52px);
line-height: 1.18;
font-weight: 800;
letter-spacing: -1.5px;
color: #151515;
}
/* Intro text */
.books-heading > p {
margin: 0;
max-width: 440px;
font-family:
"Noto Sans Devanagari",
"Poppins",
sans-serif;
font-size: 14px;
line-height: 1.9;
color: #666;
}
/* =========================================================
BOOK GRID
========================================================= */
.books-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 30px;
align-items: stretch;
}
/* =========================================================
BOOK CARD
========================================================= */
.book-card {
position: relative;
display: grid;
grid-template-columns: 36% 64%;
min-width: 0;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.075);
border-radius: 20px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.055),
0 2px 8px rgba(0, 0, 0, 0.035);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
/* Gold accent line */
.book-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 10;
background:
linear-gradient(
90deg,
#b88935,
#d8b56b,
#b88935
);
opacity: 0.85;
}
.book-card:hover {
transform: translateY(-6px);
border-color: rgba(184, 137, 53, 0.30);
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.11),
0 5px 15px rgba(184, 137, 53, 0.08);
}
/* =========================================================
BOOK COVER AREA
========================================================= */
.book-cover-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 55px 25px 45px;
overflow: hidden;
}
/* Decorative circles */
.book-cover-wrap::before {
content: "";
position: absolute;
width: 290px;
height: 290px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.075);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.book-cover-wrap::after {
content: "";
position: absolute;
width: 390px;
height: 390px;
border-radius: 50%;
border: 1px solid rgba(184, 137, 53, 0.08);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* =========================================================
BOOK COVER IMAGE
========================================================= */
.book-cover {
position: relative;
z-index: 3;
display: block;
width: auto;
max-width: 94%;
height: auto;
max-height: 470px;
object-fit: contain;
border-radius: 3px;
box-shadow:
10px 18px 30px rgba(0, 0, 0, 0.48);
transition:
transform 0.45s cubic-bezier(.2,.8,.2,1),
box-shadow 0.45s ease;
}
/* Book hover */
.book-card:hover .book-cover {
transform:
translateY(-7px)
scale(1.025);
box-shadow:
15px 25px 42px rgba(0, 0, 0, 0.55);
}
/* =========================================================
BOOK BADGE
========================================================= */
.book-badge {
position: absolute;
z-index: 6;
top: 19px;
left: 19px;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 7px 13px;
border-radius: 50px;
background:
linear-gradient(
135deg,
#c99a42,
#b88935
);
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 9px;
font-weight: 800;
line-height: 1;
letter-spacing: 1.15px;
text-transform: uppercase;
box-shadow:
0 7px 18px rgba(0, 0, 0, 0.20);
}
/* New book badge */
.book-badge-new {
background:
linear-gradient(
135deg,
#252525,
#111111
);
border: 1px solid rgba(255,255,255,0.18);
box-shadow:
0 7px 18px rgba(0, 0, 0, 0.28);
}
/* =========================================================
BOOK CONTENT
========================================================= */
.book-content {
min-width: 0;
display: flex;
flex-direction: column;
padding: 34px 31px 29px;
background:
linear-gradient(
180deg,
#ffffff 0%,
#ffffff 88%,
#fcfbf9 100%
);
}
/* =========================================================
CATEGORY
========================================================= */
.book-category {
display: block;
margin-bottom: 9px;
font-family: "Poppins", sans-serif;
font-size: 10px;
font-weight: 800;
line-height: 1.4;
letter-spacing: 1.25px;
text-transform: uppercase;
color: #b88935;
}
/* =========================================================
TITLE
========================================================= */
.book-content h3 {
margin: 0 0 3px;
font-family:
"Noto Sans Devanagari",
"Poppins",
sans-serif;
font-size: clamp(24px, 2.2vw, 32px);
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.5px;
color: #161616;
}
/* =========================================================
SUBTITLE
========================================================= */
.book-subtitle {
margin: 0 0 16px;
font-family:
"Poppins",
sans-serif;
font-size: 13px;
line-height: 1.5;
font-style: italic;
color: #777;
}
/* =========================================================
AUTHOR
========================================================= */
.book-author {
margin: 0 0 17px;
padding: 10px 0;
border-top:
1px solid rgba(0, 0, 0, 0.075);
border-bottom:
1px solid rgba(0, 0, 0, 0.075);
font-family:
"Poppins",
"Noto Sans Devanagari",
sans-serif;
font-size: 11px;
line-height: 1.6;
color: #5f5f5f;
}
.book-author strong {
color: #151515;
font-weight: 700;
}
/* =========================================================
DESCRIPTION
========================================================= */
.book-description {
margin: 0 0 21px;
font-family:
"Noto Sans Devanagari",
"Poppins",
sans-serif;
font-size: 12px;
line-height: 1.85;
color: #666;
}
/* =========================================================
META INFORMATION
========================================================= */
.book-meta {
display: grid;
/*
* Third column slightly wider.
* Prevents "Jaikesh Singh Rajput"
* from looking too cramped.
*/
grid-template-columns:
minmax(0, 0.90fr)
minmax(0, 0.90fr)
minmax(0, 1.20fr);
gap: 7px;
margin-top: auto;
margin-bottom: 19px;
}
.book-meta > div {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 76px;
padding: 10px 9px;
border-radius: 10px;
background:
linear-gradient(
145deg,
#faf8f4,
#f5f1e9
);
border:
1px solid rgba(184, 137, 53, 0.16);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8);
transition:
transform 0.25s ease,
background 0.25s ease,
border-color 0.25s ease;
}
.book-meta > div:hover {
transform: translateY(-3px);
background: #f1eadf;
border-color:
rgba(184, 137, 53, 0.30);
}
/* Meta label */
.book-meta small {
display: block;
margin-bottom: 5px;
font-family: "Poppins", sans-serif;
font-size: 7px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: #aa7d30;
}
/* Meta value */
.book-meta strong {
display: block;
max-width: 100%;
overflow-wrap: break-word;
word-break: normal;
font-family:
"Poppins",
sans-serif;
font-size: 10px;
line-height: 1.35;
font-weight: 700;
color: #333;
}
/* =========================================================
PURCHASE AREA
========================================================= */
.book-purchase-title {
margin-bottom: 9px;
font-family: "Poppins", sans-serif;
font-size: 9px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 1.7px;
text-transform: uppercase;
color: #999;
}
/* =========================================================
BUTTON AREA
========================================================= */
.book-actions {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 9px;
}
.book-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 45px;
padding: 9px 11px;
border-radius: 9px;
font-family:
"Poppins",
sans-serif;
font-size: 10px;
line-height: 1.3;
font-weight: 700;
text-align: center;
text-decoration: none !important;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.book-btn i {
font-size: 12px;
}
/* =========================================================
JK MART BUTTON
========================================================= */
.book-btn-store {
color: #ffffff !important;
background:
linear-gradient(
135deg,
#171717,
#252525
);
border:
1px solid #171717;
box-shadow:
0 7px 17px rgba(0, 0, 0, 0.14);
}
.book-btn-store:hover {
color: #ffffff !important;
background:
linear-gradient(
135deg,
#b88935,
#9f742b
);
border-color: #b88935;
transform: translateY(-2px);
box-shadow:
0 11px 24px rgba(184, 137, 53, 0.28);
}
/* =========================================================
AMAZON BUTTON
========================================================= */
.book-btn-amazon {
color: #222222 !important;
background: #f7f7f7;
border:
1px solid #dedede;
}
.book-btn-amazon:hover {
color: #ffffff !important;
background: #222222;
border-color: #222222;
transform: translateY(-2px);
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.16);
}
/* =========================================================
AUTHOR FOOTER
========================================================= */
.books-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 34px;
padding: 17px 23px;
min-height: 55px;
border-radius: 11px;
background:
linear-gradient(
135deg,
#151515,
#202020
);
color: #ffffff;
font-family:
"Poppins",
"Noto Sans Devanagari",
sans-serif;
font-size: 11px;
box-shadow:
0 9px 25px rgba(0,0,0,0.10);
}
.books-footer > div {
display: flex;
align-items: center;
gap: 8px;
}
.books-footer i {
color: #c5963d;
font-size: 14px;
}
.books-footer strong {
color: #ffffff;
}
.books-footer > div:last-child {
color: #d0d0d0;
letter-spacing: 0.4px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.books-heading {
grid-template-columns: 1fr;
gap: 18px;
margin-bottom: 38px;
}
.books-heading > p {
max-width: 800px;
}
.books-grid {
grid-template-columns: 1fr;
}
.book-card {
grid-template-columns: 35% 65%;
}
}
/* =========================================================
TABLET / MOBILE
========================================================= */
@media (max-width: 768px) {
.books-heading {
gap: 15px;
margin-bottom: 30px;
padding-bottom: 23px;
}
.books-eyebrow {
font-size: 10px;
letter-spacing: 1.5px;
}
.books-eyebrow::before {
width: 28px;
flex-basis: 28px;
}
.books-heading h2 {
font-size: 34px;
line-height: 1.25;
letter-spacing: -0.8px;
}
.books-heading > p {
max-width: 100%;
font-size: 13px;
line-height: 1.8;
}
.book-card {
grid-template-columns: 1fr;
min-height: auto;
border-radius: 17px;
}
.book-cover-wrap {
min-height: auto;
padding:
55px
30px
45px;
}
.book-cover {
max-width: 72%;
max-height: 430px;
}
.book-content {
padding: 28px 25px 25px;
}
.book-meta {
margin-top: 5px;
}
.books-footer {
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 480px) {
.books-heading {
margin-bottom: 25px;
}
.books-eyebrow {
font-size: 9px;
letter-spacing: 1.2px;
}
.books-heading h2 {
font-size: 28px;
line-height: 1.28;
}
.books-heading > p {
font-size: 12px;
line-height: 1.75;
}
.books-grid {
gap: 20px;
}
.book-card {
border-radius: 15px;
}
.book-cover-wrap {
padding:
50px
20px
40px;
}
.book-cover {
max-width: 75%;
max-height: 370px;
}
.book-badge {
top: 15px;
left: 15px;
min-height: 34px;
padding: 6px 10px;
font-size: 8px;
letter-spacing: 1px;
}
.book-content {
padding:
24px
19px
21px;
}
.book-category {
font-size: 9px;
letter-spacing: 1px;
}
.book-content h3 {
font-size: 25px;
line-height: 1.3;
}
.book-subtitle {
font-size: 12px;
margin-bottom: 14px;
}
.book-author {
font-size: 10px;
margin-bottom: 15px;
}
.book-description {
font-size: 11.5px;
line-height: 1.8;
margin-bottom: 18px;
}
.book-meta {
grid-template-columns: 1fr;
gap: 6px;
}
.book-meta > div {
min-height: auto;
padding: 10px 11px;
}
.book-meta strong {
font-size: 10px;
}
.book-actions {
grid-template-columns: 1fr;
}
.book-btn {
min-height: 44px;
font-size: 10px;
}
.books-footer {
padding: 15px;
font-size: 10px;
line-height: 1.6;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.book-btn:focus-visible {
outline:
3px solid rgba(184, 137, 53, 0.40);
outline-offset: 3px;
}
.book-card:focus-within {
border-color:
rgba(184, 137, 53, 0.45);
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.book-card,
.book-cover,
.book-btn,
.book-meta > div {
transition: none;
}
.book-card:hover,
.book-card:hover .book-cover,
.book-btn:hover,
.book-meta > div:hover {
transform: none;
}
}