/* ========================================
Theme System
======================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700&family=Finlandica:wght@400;500;600;700&display=swap");
:root {
--font-bn: "Noto Sans Bengali", sans-serif;
--font-en: "Finlandica", sans-serif;
--font-ui: "Finlandica", "Noto Sans Bengali", sans-serif;
--color-bg: #ffffff;
--color-surface: #f0efef;
--color-muted: #f1f2f3;
--color-border: #dce0e4;
--color-text: #0f172a;
--color-text-muted: #64748b;
--color-primary: #0d6efd;
--color-primary-contrast: #ffffff;
--color-hover: rgba(13, 110, 253, 0.08);
--color-text-inverse: #ffffff;
--color-secondary: #06b6d4;
--color-secondary-contrast: #071024;
--color-accent: #f59e0b;
--color-accent-contrast: #071024;
--color-success: #16a34a;
--color-success-contrast: #ffffff;
--color-warning: #d97706;
--color-warning-contrast: #071024;
--color-error: #dc2626;
--color-error-contrast: #ffffff;
/* Background + content pairs */
--bg-1: #ffffff;
--bg-1-text: #0f172a;
--bg-2: #eceff1;
--bg-2-text: #0f172a;
--bg-3: #eef2ff;
--bg-3-text: #111827;
--bg-4: #0f172a;
--bg-4-text: #e6eef8;
--bg-5: #f1f5f9;
--bg-5-text: #0f172a;
--bg-6: #e2e8f0;
--bg-6-text: #0f172a;
--bg-7: #0b1220;
--bg-7-text: #e6eef8;
--bg-8: #111827;
--bg-8-text: #e6eef8;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--shadow-soft: 0 10px 24px rgba(2, 6, 23, 0.06);
--shadow-dropdown: 0 12px 30px rgba(2, 6, 23, 0.16);
}
.offers-page {
background:
radial-gradient(
circle at top right,
rgba(13, 110, 253, 0.08),
transparent 28%
),
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
}
.offers-page__hero {
max-width: 44rem;
}
.offers-page__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 0.85rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
}
.offers-page__stack {
display: grid;
gap: 1.5rem;
}
.offers-page__campaign {
padding: 1.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface) 88%, #ffffff 12%);
box-shadow: var(--shadow-soft);
}
.offers-page__campaign-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.35rem;
}
.offers-page__pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.85rem;
}
.offers-page__pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-primary-contrast);
font-size: 0.85rem;
font-weight: 700;
}
.offers-page__pill--muted {
background: var(--bg-3);
color: var(--bg-3-text);
}
.offers-page__title {
margin: 0;
font-size: 1.6rem;
}
.offers-page__notes {
margin-top: 0.55rem;
color: var(--color-text-muted);
}
.offers-page__expiry {
min-width: 12rem;
padding: 0.95rem 1rem;
border-radius: var(--radius-md);
background: var(--bg-3);
color: var(--bg-3-text);
text-align: right;
}
.offers-page__expiry-label {
display: block;
margin-bottom: 0.2rem;
font-size: 0.82rem;
color: var(--color-text-muted);
text-transform: uppercase;
}
.offers-page__empty {
border-radius: var(--radius-lg);
}
@media (max-width: 767.98px) {
.offers-page__campaign {
padding: 1rem;
}
.offers-page__campaign-head {
flex-direction: column;
}
.offers-page__expiry {
min-width: 0;
width: 100%;
text-align: left;
}
}
[data-theme="dark"] {
--color-bg: #071024;
--color-surface: #0b1220;
--color-muted: #0f1724;
--color-border: rgba(255, 255, 255, 0.08);
--color-text: #e6eef8;
--color-text-muted: #94a3b8;
--color-primary: #0d6efd;
--color-primary-contrast: #071024;
--color-hover: rgba(110, 168, 254, 0.14);
--color-text-inverse: #e6eef8;
--color-secondary: #2dd4bf;
--color-secondary-contrast: #071024;
--color-accent: #fbbf24;
--color-accent-contrast: #071024;
--color-success: #22c55e;
--color-success-contrast: #071024;
--color-warning: #f59e0b;
--color-warning-contrast: #071024;
--color-error: #ef4444;
--color-error-contrast: #071024;
/* Background + content pairs */
--bg-1: #071024;
--bg-1-text: #e6eef8;
--bg-2: #0b1220;
--bg-2-text: #e6eef8;
--bg-3: #111827;
--bg-3-text: #e6eef8;
--bg-4: #e6eef8;
--bg-4-text: #0f172a;
--bg-5: #0f1724;
--bg-5-text: #e6eef8;
--bg-6: #151a2b;
--bg-6-text: #e6eef8;
--bg-7: #1f2937;
--bg-7-text: #e6eef8;
--bg-8: #e2e8f0;
--bg-8-text: #0f172a;
}
/* Base theme application */
html,
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.6;
}
body {
transition:
background-color 160ms ease,
color 160ms ease;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-en);
line-height: 1.3;
letter-spacing: 0.2px;
}
/* Bengali dominant blocks (optional utility class) */
.bn {
font-family: var(--font-bn);
}
/* Utilities */
.object-fit-cover {
object-fit: cover;
}
.text-muted {
color: var(--color-text-muted) !important;
}
.text-dark {
color: var(--color-text) !important;
}
.text-light {
color: var(--color-text-inverse) !important;
}
.border-base-200 {
border-color: var(--color-border) !important;
}
/* Theme-aware cards and soft status backgrounds */
.card {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
}
.alert-warning {
/* Fallback for Chrome < 111 and older browsers */
background-color: rgba(255, 193, 7, 0.12);
/* Modern browsers will override the line above with this */
background-color: color-mix(in srgb, var(--color-warning) 12%, transparent);
}
.bg-success.bg-opacity-10 {
background-color: color-mix(
in srgb,
var(--color-success) 12%,
transparent
) !important;
}
.bg-info.bg-opacity-10 {
background-color: color-mix(
in srgb,
var(--color-secondary) 12%,
transparent
) !important;
}
.bg-3.bg-opacity-10 {
background-color: color-mix(in srgb, var(--bg-3) 12%, transparent) !important;
}
/* Latest Books (premium) */
.home-latest-books-section {
padding-top: 2.35rem !important;
padding-bottom: 2.5rem !important;
}
.home-latest-books-head {
margin-bottom: 1.15rem !important;
}
.home-latest-books-subtitle {
font-size: 0.96rem;
line-height: 1.5;
}
.home-latest-books-cta {
padding: 0.58rem 0.95rem;
font-size: 0.9rem;
font-weight: 600;
}
.latest-books-splide .splide__track {
padding: 0.2rem 0.1rem 2.4rem;
}
.latest-books-splide .splide__slide {
height: auto;
}
.latest-books-splide .card {
border-radius: var(--radius-lg);
box-shadow: 0 14px 30px rgba(2, 6, 23, 0.08);
transition:
transform 180ms ease,
box-shadow 180ms ease;
}
.latest-books-splide .card:hover {
/* transform: translateY(-2px); */
box-shadow: 0 18px 38px rgba(2, 6, 23, 0.12);
}
.latest-books-splide .book-title {
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.latest-books-splide .book-authors {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.4em;
}
.latest-books-splide .splide__pagination {
bottom: -2rem;
}
.latest-books-splide .splide__pagination__page {
width: 10px;
height: 8px;
background: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
opacity: 1;
margin: 0 4px;
border-radius: 9999px;
transition:
width 180ms ease,
transform 160ms ease,
background-color 160ms ease;
}
.latest-books-splide .splide__pagination__page.is-active {
background: var(--color-primary);
width: 26px;
transform: scale(1.02);
}
.latest-books-splide .card-body {
padding: 0.9rem;
}
.latest-books-splide .card-title {
margin-bottom: 0.35rem;
font-size: 1rem;
line-height: 1.35;
}
.latest-books-splide .book-card__authors {
margin-bottom: 0.42rem;
font-size: 0.84rem;
line-height: 1.45;
}
.latest-books-splide .card-body > .small.text-muted:last-of-type {
margin-bottom: 0.55rem;
font-size: 0.82rem;
line-height: 1.45;
}
.latest-books-splide .book-card__price {
margin-bottom: 0.75rem !important;
}
.latest-books-splide .book-card .card-img-top > div > div {
height: 176px !important;
}
.splide__arrow--next {
right: 0em !important;
}
.splide__arrow--prev {
left: 0em !important;
}
/* Testimonials layout balance */
.testimonials-wrap .testimonial {
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-1) 92%, transparent);
padding: var(--space-3);
}
.testimonials-wrap .testimonial .card {
border-radius: var(--radius-lg);
}
.testimonials-wrap .splide__track {
padding: var(--space-2);
}
.home-hero-section {
padding: 0.6rem 0 0.35rem;
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 12%, transparent),
transparent 22rem
),
radial-gradient(
circle at bottom right,
color-mix(in srgb, var(--color-accent) 10%, transparent),
transparent 24rem
),
linear-gradient(
180deg,
var(--bg-2),
color-mix(in srgb, var(--bg-1) 88%, var(--bg-2))
);
}
.home-hero-container {
position: relative;
}
.home-hero-row {
padding: clamp(0.8rem, 1.5vw, 1.25rem);
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
border-radius: 2rem;
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}
.home-hero-card {
padding: clamp(0.7rem, 1.2vw, 1rem) !important;
}
.home-hero-content {
max-width: 41rem;
}
.home-hero-content .lucide-quote {
width: 3.5rem;
height: 3.5rem;
margin-bottom: 0.9rem;
opacity: 0.9;
}
.home-hero-content .hero-text {
margin-bottom: 1rem;
font-size: clamp(2.2rem, 4.5vw, 4.1rem);
line-height: 1.08;
letter-spacing: -0.05em;
}
.home-hero-content .lead {
max-width: 38rem;
color: var(--color-text-muted);
font-size: 1.02rem;
line-height: 1.8;
}
.home-hero-actions {
flex-wrap: wrap;
gap: 0.75rem !important;
}
.home-hero-actions .btn {
min-width: 10.5rem;
padding-inline: 1.15rem;
}
.home-hero-visual {
position: relative;
padding: 1.25rem 1rem;
border-radius: 1.8rem;
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 6%, transparent),
transparent 30%
),
color-mix(in srgb, var(--color-surface) 94%, transparent);
box-shadow: 0 24px 54px rgba(15, 23, 42, 0.1);
}
.home-hero-visual .hero-illustration {
display: block;
width: 100%;
max-width: 24rem;
margin: 0 auto;
}
.home-hero-badge {
position: absolute;
padding: 0.8rem 0.95rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
box-shadow: var(--shadow-soft);
}
.home-hero-badge--top {
top: 1rem;
right: 0;
}
.home-hero-badge--bottom {
left: 0;
bottom: 1.5rem;
}
.home-hero-badge span {
display: block;
margin-bottom: 0.2rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
}
.home-hero-badge strong {
display: block;
font-size: 1rem;
color: var(--color-text);
}
.home-stats-section {
padding-bottom: 2.2rem;
}
.home-stats-row {
--bs-gutter-y: 1rem;
}
.home-stat-card {
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
border-radius: 1.35rem;
background: color-mix(
in srgb,
var(--color-surface) 95%,
transparent
) !important;
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
}
.home-stat-card__body {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 11rem;
}
.home-stat-card svg {
width: 2rem;
height: 2rem;
margin-inline: auto;
margin-bottom: 0.85rem;
}
.home-stat-card h3 {
margin-bottom: 0.35rem;
font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.home-stat-card p {
margin-bottom: 0;
color: var(--color-text-muted);
}
.home-stat-card--primary svg,
.home-stat-card--primary h3 {
color: var(--color-primary);
}
.home-stat-card--success svg,
.home-stat-card--success h3 {
color: var(--color-success);
}
.home-stat-card--secondary svg,
.home-stat-card--secondary h3 {
color: var(--color-secondary);
}
.home-stat-card--accent svg,
.home-stat-card--accent h3 {
color: var(--color-warning);
}
.home-why-section {
padding-block: 1.8rem;
background:
radial-gradient(
circle at top right,
color-mix(in srgb, var(--color-primary) 10%, transparent),
transparent 24rem
),
linear-gradient(
180deg,
color-mix(in srgb, var(--bg-3) 70%, var(--bg-1)),
color-mix(in srgb, var(--bg-1) 90%, var(--bg-3))
);
}
.home-why-container {
max-width: 1240px;
}
.home-section-head {
max-width: 44rem;
margin: 0 auto 1rem;
}
.home-section-head__eyebrow,
.home-banner-overlay__eyebrow {
display: inline-flex;
align-items: center;
padding: 0.38rem 0.8rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-section-head .text-muted {
max-width: 27rem;
margin-inline: auto;
font-size: 0.9rem;
line-height: 1.45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-why-layout {
align-items: stretch !important;
}
.home-why-visual {
height: 100%;
padding: 1.2rem;
border-radius: 1.7rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
box-shadow: 0 20px 46px rgba(15, 23, 42, 0.06);
}
.home-why-visual img {
width: 100%;
height: 100%;
object-fit: contain;
}
.home-why-copy {
height: 100%;
}
.home-why-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
.home-why-list__item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.68rem 0.76rem;
border-radius: 1.1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
min-height: 100%;
}
.home-why-list__icon {
width: 2rem;
height: 2rem;
border-radius: 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
}
.home-why-list__text {
display: block;
color: var(--color-text);
font-size: 0.95rem;
line-height: 1.58;
}
.home-why-cta {
padding: 0.62rem 1rem;
font-size: 0.9rem;
font-weight: 600;
}
.home-banner-section .container {
max-width: 1240px;
}
.home-banner-link {
position: relative;
display: block;
overflow: hidden;
border-radius: 1.7rem;
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}
.home-banner-image {
min-height: 240px;
}
.home-banner-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.8rem;
padding: clamp(1.2rem, 2vw, 2rem);
background: linear-gradient(
180deg,
transparent 18%,
rgba(15, 23, 42, 0.18) 44%,
rgba(15, 23, 42, 0.82) 100%
);
color: #fff;
}
.home-banner-overlay strong {
max-width: 28rem;
font-size: clamp(1.25rem, 2.4vw, 2rem);
line-height: 1.2;
}
.home-banner-overlay__cta {
font-size: 0.96rem;
font-weight: 700;
}
.home-testimonial-section {
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-secondary) 10%, transparent),
transparent 24rem
),
linear-gradient(
180deg,
color-mix(in srgb, var(--bg-1) 96%, var(--bg-3)),
var(--bg-1)
);
}
.home-testimonial-head {
margin-bottom: 2rem !important;
justify-content: center !important;
text-align: center;
}
.home-testimonial-layout {
align-items: stretch !important;
}
.home-testimonial-shell {
display: grid;
grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
gap: 1.55rem;
align-items: stretch;
width: fit-content;
max-width: 100%;
margin-inline: auto;
}
.home-testimonial-center {
position: relative;
min-width: 0;
width: min(41.5rem, calc(100vw - 8rem));
}
.home-testimonial-slider {
position: relative;
overflow: visible;
width: 100%;
min-height: 20.65rem;
padding: clamp(0.8rem, 2vw, 1rem);
border-radius: 2rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 98%, transparent),
color-mix(in srgb, var(--bg-1) 96%, var(--color-surface))
),
radial-gradient(
circle at top,
color-mix(in srgb, var(--color-primary) 10%, transparent),
transparent 45%
);
box-shadow: 0 22px 54px rgba(15, 23, 42, 0.1);
}
.home-testimonial-slides {
position: relative;
overflow: hidden;
border-radius: 1.6rem;
min-height: 18.65rem;
height: 18.65rem;
display: grid;
}
.home-testimonial-card {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-height: 18.65rem;
height: 18.65rem;
padding: clamp(1rem, 2.2vw, 1.3rem) !important;
border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
border-radius: 1.6rem;
background: color-mix(in srgb, var(--color-surface) 97%, transparent);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
transform-origin: center;
position: relative;
}
.home-testimonial-card:not(.is-active) {
display: none;
}
.home-testimonial-card.is-active {
display: flex;
}
.home-testimonial-card.is-entering {
animation-duration: 0.78s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-fill-mode: both;
z-index: 2;
}
.home-testimonial-card.is-entering.from-next {
animation-name: homeTestimonialCardInNext;
}
.home-testimonial-card.is-entering.from-prev {
animation-name: homeTestimonialCardInPrev;
}
.home-testimonial-card.is-exiting {
display: block;
animation-duration: 0.62s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-fill-mode: both;
pointer-events: none;
z-index: 1;
}
.home-testimonial-card.is-exiting.to-next {
animation-name: homeTestimonialCardOutNext;
}
.home-testimonial-card.is-exiting.to-prev {
animation-name: homeTestimonialCardOutPrev;
}
.home-testimonial-card__quote {
position: absolute;
top: 0.8rem;
right: 0.95rem;
color: var(--color-primary);
opacity: 0.16;
line-height: 1;
pointer-events: none;
transform-origin: center;
}
.home-testimonial-card__quote svg {
width: 2.7rem;
height: 2.7rem;
}
.home-testimonial-card.is-entering .home-testimonial-card__quote {
animation: homeTestimonialQuotePulse 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-testimonial-card__text {
font-size: 0.98rem;
line-height: 1.2;
flex: 1 1 auto;
min-height: 0;
margin-bottom: 0 !important;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
padding-right: 1.75rem;
}
.home-testimonial-card__stars {
color: var(--color-accent);
}
.home-testimonial-card__stars svg {
width: 0.9rem;
height: 0.9rem;
}
.home-testimonial-card__date {
color: var(--color-text-muted);
}
.home-testimonial-card__person h3 {
margin: 0;
font-size: 0.98rem;
line-height: 1.2;
}
.home-testimonial-card__person p {
margin: 0.1rem 0 0;
color: var(--color-text-muted);
line-height: 1.2;
}
.home-testimonial-card__footer {
margin-top: auto;
min-height: 3.55rem;
padding-top: 0.45rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
flex-shrink: 0;
}
.home-testimonial-card__identity {
min-width: 0;
}
.home-testimonial-card__avatar {
width: 2.6rem;
height: 2.6rem;
flex: 0 0 2.6rem;
border-radius: 999px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(
in srgb,
var(--color-primary) 14%,
var(--color-surface)
);
color: var(--color-primary);
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.04em;
}
.home-testimonial-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.home-testimonial-card__summary {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.2rem;
}
.home-testimonial-slider__control {
position: absolute;
bottom: -1.3rem;
z-index: 4;
width: 2.6rem;
height: 2.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface) 95%, transparent);
color: var(--color-text);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
transform: none;
transition:
transform 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.home-testimonial-slider__control--prev {
left: calc(50% - 3rem);
}
.home-testimonial-slider__control--next {
left: calc(50% + 0.4rem);
}
.home-testimonial-slider__control:hover {
transform: scale(1.04);
border-color: color-mix(
in srgb,
var(--color-primary) 34%,
var(--color-border)
);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.16);
}
.home-testimonial-slider__progress {
position: absolute;
left: 50%;
bottom: -0.15rem;
z-index: 3;
width: 5.5rem;
height: 2px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--color-border) 76%, transparent);
transform: translateX(-50%);
}
.home-testimonial-slider__progress-bar {
display: block;
width: 100%;
height: 100%;
transform-origin: left center;
transform: scaleX(0);
border-radius: inherit;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--color-primary) 78%, white),
color-mix(in srgb, var(--color-accent) 74%, white)
);
}
.home-testimonial-slider.is-progressing .home-testimonial-slider__progress-bar {
animation: homeTestimonialProgress 9s linear forwards;
}
.home-testimonial-rail {
display: flex;
width: 100%;
}
.home-testimonial-rail--left {
justify-content: flex-end;
margin-right: 0;
}
.home-testimonial-rail--right {
justify-content: flex-start;
margin-left: 0;
}
.home-testimonial-rail-track {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
.home-testimonial-rail-name {
min-height: 17.4rem;
padding: 0.35rem 0.16rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-left: 1px solid
color-mix(in srgb, var(--color-border) 84%, transparent);
border-right: 1px solid
color-mix(in srgb, var(--color-border) 84%, transparent);
background: transparent;
color: color-mix(in srgb, var(--color-text-muted) 88%, transparent);
opacity: 0.72;
transition:
color 0.2s ease,
opacity 0.2s ease,
transform 0.35s ease;
}
.home-testimonial-rail--left .home-testimonial-rail-name {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.home-testimonial-rail--right .home-testimonial-rail-name {
writing-mode: vertical-rl;
}
.home-testimonial-rail-name span {
display: inline-block;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.home-testimonial-rail-name.is-active {
color: var(--color-text);
opacity: 1;
transform: scale(1.02);
}
.home-testimonial-rail--left .home-testimonial-rail-name.is-active {
transform: rotate(180deg) scale(1.02);
}
.home-testimonial-rail-name.is-shifting {
animation: homeTestimonialRailShift 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-testimonial-rail--left .home-testimonial-rail-name.is-shifting {
animation-name: homeTestimonialRailShiftLeft;
}
@keyframes homeTestimonialCardInNext {
0% {
opacity: 0;
transform: translateX(46px) translateY(10px) scale(0.975);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes homeTestimonialCardInPrev {
0% {
opacity: 0;
transform: translateX(-46px) translateY(10px) scale(0.975);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes homeTestimonialQuotePulse {
0% {
opacity: 0;
transform: scale(0.72) rotate(-8deg);
filter: blur(5px);
}
55% {
opacity: 0.22;
transform: scale(1.08) rotate(0deg);
filter: blur(0);
}
100% {
opacity: 0.16;
transform: scale(1);
filter: blur(0);
}
}
@keyframes homeTestimonialProgress {
0% {
transform: scaleX(0);
opacity: 0.75;
}
100% {
transform: scaleX(1);
opacity: 1;
}
}
@keyframes homeTestimonialRailShift {
0% {
opacity: 0;
transform: translateX(10px);
}
100% {
opacity: 0.72;
transform: translateX(0);
}
}
@keyframes homeTestimonialRailShiftLeft {
0% {
opacity: 0;
transform: rotate(180deg) translateX(10px);
}
100% {
opacity: 0.72;
transform: rotate(180deg) translateX(0);
}
}
@keyframes homeTestimonialCardOutNext {
0% {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
}
100% {
opacity: 0;
transform: translateX(-30px) scale(0.985);
filter: blur(3px);
}
}
@keyframes homeTestimonialCardOutPrev {
0% {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
}
100% {
opacity: 0;
transform: translateX(30px) scale(0.985);
filter: blur(3px);
}
}
@media (max-width: 991.98px) {
.home-hero-row {
border-radius: 1.6rem;
}
.home-hero-visual {
margin-top: 0.75rem;
}
.home-hero-badge {
position: static;
margin-top: 0.85rem;
}
.home-why-list {
grid-template-columns: 1fr;
}
.home-section-head {
margin-bottom: 0.85rem;
}
.home-latest-books-section {
padding-top: 1.95rem !important;
padding-bottom: 2.15rem !important;
}
.home-latest-books-head {
align-items: flex-start !important;
gap: 0.7rem !important;
margin-bottom: 0.95rem !important;
}
}
@media (max-width: 767.98px) {
.home-hero-section {
padding-top: 0.3rem;
}
.home-hero-row,
.home-hero-visual,
.home-stat-card,
.home-why-visual,
.home-why-list__item,
.home-banner-link,
.home-testimonial-slider {
border-radius: 1.2rem;
}
.home-hero-row {
padding: 0.55rem;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.home-hero-card {
padding: 0.15rem !important;
overflow: hidden;
}
.home-hero-mobile-art {
opacity: 0.1;
pointer-events: none;
}
.home-hero-mobile-art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.96),
rgba(255, 255, 255, 0.88)
);
}
[data-theme="dark"] .home-hero-mobile-art::after,
body.dark-mode .home-hero-mobile-art::after {
background: linear-gradient(
180deg,
rgba(15, 23, 42, 0.94),
rgba(15, 23, 42, 0.82)
);
}
.home-hero-content {
max-width: none;
padding: 0.55rem 0.45rem 0.35rem;
}
.home-hero-content .lucide-quote {
width: 2rem;
height: 2rem;
margin-bottom: 0.45rem;
opacity: 0.55;
}
.home-hero-content .hero-text {
margin-bottom: 0.65rem;
font-size: clamp(1.85rem, 8vw, 2.45rem);
line-height: 1.12;
letter-spacing: -0.04em;
}
.home-hero-content .lead {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 1rem !important;
font-size: 0.94rem;
line-height: 1.62;
}
.home-hero-actions {
flex-direction: row;
flex-wrap: nowrap;
gap: 0.55rem !important;
}
.home-hero-actions .btn {
flex: 1 1 0;
width: auto;
min-width: 0;
padding: 0.68rem 0.75rem;
font-size: 0.88rem;
white-space: nowrap;
}
.home-hero-actions .btn svg {
width: 1rem;
height: 1rem;
}
.home-banner-overlay {
padding: 1rem;
}
.home-banner-overlay strong {
max-width: 100%;
}
.home-why-list {
gap: 0.58rem;
}
.home-why-list__item {
padding: 0.62rem 0.7rem;
border-radius: 1rem;
}
.home-why-list__icon {
width: 1.85rem;
height: 1.85rem;
border-radius: 0.72rem;
}
.home-why-list__text {
font-size: 0.92rem;
line-height: 1.52;
}
.home-why-cta {
padding: 0.58rem 0.92rem;
font-size: 0.88rem;
}
.home-latest-books-section {
padding-inline: 0.9rem !important;
margin-bottom: 2rem !important;
}
.home-latest-books-head {
margin-bottom: 0.8rem !important;
}
.home-latest-books-head h2 {
font-size: 1.55rem !important;
margin-bottom: 0.2rem !important;
}
.home-latest-books-subtitle {
font-size: 0.88rem;
line-height: 1.42;
}
.home-latest-books-cta {
padding: 0.48rem 0.82rem;
font-size: 0.84rem;
}
.latest-books-splide .splide__track {
padding: 0.1rem 0.05rem 2rem;
}
.latest-books-splide .card {
border-radius: 1rem;
}
.latest-books-splide .card-body {
padding: 0.78rem;
}
.latest-books-splide .card-title {
font-size: 0.95rem;
margin-bottom: 0.28rem;
}
.latest-books-splide .book-card__authors {
margin-bottom: 0.35rem;
font-size: 0.8rem;
}
.latest-books-splide .card-body > .small.text-muted:last-of-type {
margin-bottom: 0.45rem;
font-size: 0.78rem;
line-height: 1.4;
}
.latest-books-splide .book-card__price {
margin-bottom: 0.62rem !important;
}
.latest-books-splide .book-card .card-img-top > div > div {
height: 156px !important;
}
.latest-books-splide .splide__pagination {
bottom: -1.6rem;
}
.latest-books-splide .splide__pagination__page {
width: 8px;
height: 8px;
margin: 0 3px;
}
.latest-books-splide .splide__pagination__page.is-active {
width: 20px;
}
.home-testimonial-shell {
width: 100%;
grid-template-columns: 0.8rem minmax(0, 1fr) 0.8rem;
gap: 0.18rem;
}
.home-testimonial-rail {
display: flex;
}
.home-testimonial-center {
width: min(100vw - 2.1rem, 100%);
}
.home-testimonial-rail-track {
gap: 0.2rem;
}
.home-testimonial-rail-name {
min-height: 16.5rem;
padding: 0.18rem 0.02rem;
}
.home-testimonial-rail-name span {
font-size: 0.68rem;
letter-spacing: 0.04em;
}
.home-testimonial-card {
min-height: 17.1rem;
height: 17.1rem;
padding: 0.9rem !important;
}
.home-testimonial-card__footer {
flex-direction: row;
align-items: flex-end !important;
}
.home-testimonial-card__summary {
align-items: flex-end;
}
.home-testimonial-slider__control {
width: 2.3rem;
height: 2.3rem;
bottom: -1.15rem;
}
.home-testimonial-slider__control--prev {
left: calc(50% - 2.6rem);
}
.home-testimonial-slider__control--next {
left: calc(50% + 0.3rem);
}
.home-testimonial-slider {
min-height: 18.85rem;
border-radius: 1.35rem;
padding: 0.45rem;
}
.home-testimonial-slides {
min-height: 17.1rem;
height: 17.1rem;
border-radius: 1.1rem;
}
.home-testimonial-card__text {
-webkit-line-clamp: 5;
line-clamp: 5;
padding-right: 1.35rem;
font-size: 0.85rem;
line-height: 1.2;
}
.home-testimonial-section {
padding-inline: 0.7rem !important;
}
.home-testimonial-section .container {
padding-inline: 0.25rem;
}
.home-testimonial-card__quote {
top: 0.75rem;
right: 0.72rem;
}
.home-testimonial-card__quote svg {
width: 1.85rem;
height: 1.85rem;
}
}
.home-hero {
padding: 1.75rem 0 1rem;
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 12%, transparent),
transparent 22rem
),
radial-gradient(
circle at bottom right,
color-mix(in srgb, var(--color-accent) 12%, transparent),
transparent 24rem
),
linear-gradient(
180deg,
var(--bg-2),
color-mix(in srgb, var(--bg-1) 88%, var(--bg-2))
);
}
.home-hero__panel {
position: relative;
overflow: hidden;
padding: clamp(1.5rem, 2vw, 2.25rem);
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
border-radius: 2rem;
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}
.home-hero__eyebrow,
.home-section-heading__eyebrow,
.home-banner__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.38rem 0.8rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-hero__title {
margin: 1rem 0 0.9rem;
font-size: clamp(2.2rem, 4vw, 4rem);
line-height: 1.1;
letter-spacing: -0.04em;
}
.home-hero__title span {
color: var(--color-primary);
}
.home-hero__lead,
.home-hero__sublead {
max-width: 40rem;
color: var(--color-text-muted);
}
.home-hero__lead {
font-size: 1.05rem;
margin-bottom: 0.75rem;
}
.home-hero__sublead {
margin-bottom: 1.4rem;
}
.home-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.4rem;
}
.home-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
.home-hero__meta-item {
min-width: 8rem;
padding: 0.8rem 0.95rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.home-hero__meta-item strong {
display: block;
font-size: 1.1rem;
color: var(--color-text);
}
.home-hero__meta-item span {
display: block;
margin-top: 0.15rem;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.home-hero__visual {
position: relative;
min-height: 100%;
padding: 1rem 0.75rem 1.5rem;
}
.home-hero__visual-card {
position: relative;
border-radius: 1.8rem;
border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 6%, transparent),
transparent 30%
),
color-mix(in srgb, var(--color-surface) 95%, transparent);
padding: 1.5rem;
box-shadow: 0 24px 54px rgba(15, 23, 42, 0.1);
}
.home-hero__visual-card img {
display: block;
width: 100%;
max-width: 24rem;
margin: 0 auto;
}
.home-hero__floating-card {
position: absolute;
left: 0;
bottom: 2rem;
padding: 0.85rem 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
box-shadow: var(--shadow-soft);
}
.home-hero__floating-card--alt {
left: auto;
right: 0;
top: 1rem;
bottom: auto;
}
.home-hero__floating-card span {
display: block;
margin-bottom: 0.18rem;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.home-hero__floating-card strong {
font-size: 0.92rem;
color: var(--color-text);
}
.home-achievements {
padding: 0 0 2rem;
}
.home-achievements__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.home-achievement-card {
display: flex;
gap: 0.95rem;
align-items: center;
padding: 1rem 1.1rem;
border-radius: 1.35rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
background: color-mix(in srgb, var(--color-surface) 95%, transparent);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.05);
}
.home-achievement-card__icon {
width: 3rem;
height: 3rem;
border-radius: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.home-achievement-card--primary .home-achievement-card__icon {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
}
.home-achievement-card--accent .home-achievement-card__icon {
background: color-mix(in srgb, var(--color-accent) 18%, transparent);
color: var(--color-warning);
}
.home-achievement-card--secondary .home-achievement-card__icon {
background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
color: var(--color-secondary);
}
.home-achievement-card--success .home-achievement-card__icon {
background: color-mix(in srgb, var(--color-success) 14%, transparent);
color: var(--color-success);
}
.home-achievement-card h3 {
margin: 0;
font-size: 1.45rem;
line-height: 1;
}
.home-achievement-card p {
margin: 0.22rem 0 0;
color: var(--color-text-muted);
}
.home-why,
.home-testimonials {
padding: 4rem 0;
}
.home-why {
background:
radial-gradient(
circle at top right,
color-mix(in srgb, var(--color-primary) 10%, transparent),
transparent 24rem
),
linear-gradient(
180deg,
color-mix(in srgb, var(--bg-3) 72%, var(--bg-1)),
color-mix(in srgb, var(--bg-1) 88%, var(--bg-3))
);
}
.home-section-heading {
max-width: 44rem;
margin: 0 auto 2.25rem;
}
.home-section-heading__title {
margin: 1rem 0 0.8rem;
font-size: clamp(1.9rem, 3vw, 3rem);
}
.home-section-heading__subtitle {
margin: 0;
color: var(--color-text-muted);
}
.home-why__layout {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 1.4rem;
align-items: center;
}
.home-why__visual-shell {
padding: 1.25rem;
border-radius: 1.8rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.06);
}
.home-why__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.home-why__card {
height: 100%;
padding: 1rem 1rem 1.05rem;
border-radius: 1.15rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
}
.home-why__card p {
margin: 0;
font-size: 0.95rem;
}
.home-why__card-icon {
width: 2.1rem;
height: 2.1rem;
margin-bottom: 0.8rem;
border-radius: 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
}
.home-banner {
padding: 0 0 3rem;
}
.home-banner__link {
position: relative;
display: block;
overflow: hidden;
border-radius: 1.8rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}
.home-banner__image {
display: block;
width: 100%;
min-height: 240px;
object-fit: cover;
}
.home-banner__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.75rem;
padding: clamp(1.2rem, 2vw, 2rem);
background: linear-gradient(
180deg,
transparent 15%,
rgba(15, 23, 42, 0.18) 48%,
rgba(15, 23, 42, 0.82) 100%
);
color: #fff;
}
.home-banner__overlay strong {
max-width: 28rem;
font-size: clamp(1.2rem, 2.5vw, 2.1rem);
line-height: 1.2;
}
.home-banner__cta {
font-size: 0.95rem;
font-weight: 700;
}
.home-testimonials {
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-secondary) 10%, transparent),
transparent 22rem
),
linear-gradient(
180deg,
color-mix(in srgb, var(--bg-1) 96%, var(--bg-3)),
var(--bg-1)
);
}
.home-testimonials__visual {
padding: 1.2rem;
border-radius: 1.8rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
background: color-mix(in srgb, var(--color-surface) 95%, transparent);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}
.home-testimonials__slider {
border-radius: 1.7rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}
.home-testimonials__mobile-art {
opacity: 0.08;
}
.home-testimonial-card {
background: transparent;
border: 0;
box-shadow: none !important;
}
.home-testimonial-card__quote {
color: var(--color-primary);
}
.home-testimonial-card__text {
font-size: 1.02rem;
line-height: 1.2;
}
.home-testimonial-card__stars {
color: var(--color-accent);
}
.home-testimonial-card__date {
color: var(--color-text-muted);
}
.home-testimonial-card__person h3 {
margin: 0;
font-size: 1.08rem;
}
.home-testimonial-card__person p {
margin: 0.2rem 0 0;
color: var(--color-text-muted);
}
.home-author-name {
font-size: 1.15rem;
}
.home-author-bio {
flex-grow: 1;
font-size: 0.9rem;
}
.home-author-link {
font-size: 0.9rem;
}
@media (max-width: 991.98px) {
.home-achievements__grid,
.home-why__layout,
.home-why__grid {
grid-template-columns: 1fr 1fr;
}
.home-why__layout {
gap: 1rem;
}
.home-hero__floating-card {
position: static;
margin-top: 0.9rem;
}
.home-hero__visual {
padding: 0.5rem 0 0;
}
}
@media (max-width: 767.98px) {
.home-hero {
padding-top: 1rem;
}
.home-hero__panel,
.home-why__visual-shell,
.home-testimonials__visual,
.home-testimonials__slider,
.home-banner__link {
border-radius: 1.35rem;
}
.home-achievements__grid,
.home-why__grid {
grid-template-columns: 1fr;
}
.home-hero__actions,
.home-hero__meta {
flex-direction: column;
align-items: stretch;
}
.home-hero__actions .btn {
width: 100%;
}
.home-banner__overlay {
padding: 1rem;
}
}
/* Featured Authors */
.author-card {
border-radius: var(--radius-lg);
transition:
transform 180ms ease,
box-shadow 180ms ease;
}
.author-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.12);
}
.author-avatar {
width: 88px;
height: 88px;
border-radius: 50%;
padding: 4px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
box-shadow: inset 0 0 0 2px var(--color-primary);
}
.author-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
/* Latest News & Blog */
.home-blog-section {
padding-top: 2.35rem !important;
padding-bottom: 2.45rem !important;
}
.home-blog-head {
margin-bottom: 1.15rem !important;
}
.home-blog-head > div {
width: 100%;
}
.home-blog-head__top {
width: 100%;
}
.home-blog-subtitle {
font-size: 0.96rem;
line-height: 1.5;
}
.home-blog-cta {
padding: 0.58rem 0.95rem;
font-size: 0.9rem;
font-weight: 600;
}
.blog-card {
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
transition:
transform 180ms ease,
box-shadow 180ms ease;
}
.blog-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.12);
}
.blog-media {
height: 220px;
}
.blog-overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--color-bg) 25%, transparent);
opacity: 0;
transition: opacity 180ms ease;
}
.blog-card:hover .blog-overlay {
opacity: 1;
}
.blog-title {
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card .card-body {
padding: 0.95rem;
}
.blog-card .btn.btn-outline-primary.btn-sm {
padding: 0.5rem 0.82rem;
font-size: 0.84rem;
}
.blog-excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.4em;
}
.blog-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
row-gap: 0.35rem;
}
.blog-card__meta-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
line-height: 1;
white-space: nowrap;
}
.blog-card__meta-item i {
color: var(--color-primary);
font-size: 0.9em;
}
.blog-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--color-border);
}
.blog-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.site-cart-nav-btn {
display: inline-flex;
align-items: center;
position: relative;
white-space: nowrap;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
padding: 0;
border-radius: 999px;
border-width: 2px;
border-color: color-mix(
in srgb,
var(--color-primary) 58%,
var(--color-border)
) !important;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),
color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface))
);
color: var(--color-primary) !important;
}
.site-cart-nav-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.08rem;
}
.site-cart-nav-btn__badge {
min-width: 1.15rem;
height: 1.15rem;
padding: 0 0.28rem;
border-radius: 999px;
background: #dc2626;
color: #fff;
font-size: 0.66rem;
line-height: 1.15rem;
text-align: center;
font-weight: 700;
position: absolute;
top: -0.34rem;
right: -0.36rem;
box-shadow: 0 0 0 2px var(--color-bg);
}
[data-book-cart-button][data-in-cart="1"] {
background: color-mix(
in srgb,
var(--color-secondary) 28%,
var(--color-surface)
) !important;
border-color: color-mix(
in srgb,
var(--color-secondary) 76%,
var(--color-border)
) !important;
color: color-mix(in srgb, var(--color-secondary) 88%, #0f172a) !important;
}
[data-book-cart-button][data-in-cart="1"]:hover,
[data-book-cart-button][data-in-cart="1"]:focus {
background: color-mix(
in srgb,
var(--color-secondary) 34%,
var(--color-surface)
) !important;
border-color: var(--color-secondary) !important;
color: var(--color-secondary) !important;
}
.cart-toast {
position: fixed;
left: 50%;
bottom: 1.25rem;
transform: translate(-50%, 1rem);
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.75rem 1rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.92);
color: #fff;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
opacity: 0;
pointer-events: none;
transition:
opacity 180ms ease,
transform 180ms ease;
z-index: 1085;
}
.cart-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.cart-toast__icon {
font-size: 1rem;
line-height: 1;
}
.cart-toast__text {
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
}
.cart-toast--success .cart-toast__icon {
color: #22c55e;
}
.cart-toast--error .cart-toast__icon {
color: #f87171;
}
.cart-toast--info .cart-toast__icon {
color: #60a5fa;
}
[data-theme="dark"] .cart-toast {
background: rgba(248, 250, 252, 0.94);
color: #0f172a;
box-shadow: 0 18px 45px rgba(2, 6, 23, 0.4);
}
.site-toast-stack {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1095;
display: grid;
gap: 0.7rem;
width: min(24rem, calc(100vw - 1.5rem));
pointer-events: none;
}
.site-toast {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.85rem 0.95rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
color: var(--color-text);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(-0.5rem);
pointer-events: auto;
transition:
opacity 180ms ease,
transform 180ms ease;
}
.site-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.site-toast__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 0.75rem;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-primary);
flex: 0 0 auto;
}
.site-toast__body {
min-width: 0;
flex: 1 1 auto;
}
.site-toast__title {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.25;
}
.site-toast__message {
margin: 0.12rem 0 0;
font-size: 0.88rem;
line-height: 1.45;
color: var(--color-text-muted);
}
.site-toast__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
margin-left: auto;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--color-text-muted);
flex: 0 0 auto;
}
.site-toast__close:hover,
.site-toast__close:focus {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
}
.site-toast--success .site-toast__icon {
background: color-mix(
in srgb,
var(--color-success) 16%,
var(--color-surface)
);
color: var(--color-success);
}
.site-toast--error .site-toast__icon {
background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface));
color: var(--color-error);
}
.site-toast--warning .site-toast__icon {
background: color-mix(
in srgb,
var(--color-warning) 18%,
var(--color-surface)
);
color: color-mix(in srgb, var(--color-warning) 86%, #d97706);
}
.site-toast--info .site-toast__icon {
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-primary);
}
[data-theme="dark"] .site-toast {
background: color-mix(in srgb, #0f1724 92%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-border) 86%, transparent);
}
@media (max-width: 575.98px) {
.site-toast-stack {
left: 0.75rem;
right: 0.75rem;
width: auto;
top: 0.75rem;
}
}
.cart-page__hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem 1rem;
padding: 1rem 1.2rem;
border: 1px solid var(--color-border);
border-radius: 1.1rem;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)),
color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface))
),
var(--color-surface);
}
.cart-page__eyebrow {
display: inline-flex;
margin-bottom: 0.35rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
}
.cart-page__title {
font-size: clamp(1.2rem, 1.6vw, 1.6rem);
font-weight: 800;
line-height: 1.15;
}
.cart-page__subtitle {
color: var(--color-text-muted);
max-width: 28rem;
font-size: 0.92rem;
line-height: 1.45;
}
.cart-page__hero-actions {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.cart-page__mini-stat {
min-width: 6.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.85rem;
background: color-mix(
in srgb,
var(--color-surface) 92%,
var(--color-primary)
);
border: 1px solid var(--color-border);
}
.cart-page__mini-stat span {
display: block;
font-size: 0.64rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.cart-page__mini-stat strong {
display: inline-block;
margin-top: 0.1rem;
font-size: 0.92rem;
}
.cart-page__mini-stat-note {
display: inline-block;
margin-top: 0.1rem;
margin-left: 0.45rem;
color: var(--color-text-muted);
font-size: 0.72rem;
text-decoration: line-through;
}
.cart-price-stack,
.cart-line-price,
.cart-summary__totals {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.12rem;
}
.shipping-checkout {
background:
radial-gradient(
circle at top right,
color-mix(in srgb, var(--color-accent) 12%, transparent),
transparent 28rem
),
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 4%, var(--color-bg)),
var(--color-bg)
);
}
.shipping-checkout__hero,
.shipping-checkout__panel,
.checkout-pay-card,
.checkout-status-card {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bg-1) 96%, var(--color-surface)),
color-mix(in srgb, var(--color-primary) 2%, var(--color-surface))
);
border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
border-radius: 1.5rem;
box-shadow: var(--shadow-soft);
}
.shipping-checkout__hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
padding: 0.95rem 1.15rem;
}
.shipping-checkout__eyebrow,
.checkout-pay-card__eyebrow {
display: inline-flex;
align-items: center;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35rem 0.7rem;
margin-bottom: 0.75rem;
}
.shipping-checkout__title,
.checkout-pay-card__title,
.checkout-status-card__title {
margin: 0;
font-size: clamp(1.25rem, 1.7vw, 1.7rem);
line-height: 1.02;
color: var(--color-text);
}
.shipping-checkout__copy {
display: none;
}
.shipping-checkout__copy,
.checkout-pay-card__copy,
.checkout-status-card__copy {
color: var(--color-text-muted);
}
.shipping-checkout__panel {
padding: 1.3rem;
}
.shipping-checkout__summary-col {
align-self: flex-start;
}
.shipping-checkout__panel--summary {
position: sticky;
top: 6.25rem;
}
.shipping-checkout__section + .shipping-checkout__section {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
}
.shipping-checkout__section h2,
.shipping-checkout__panel--summary h2,
.checkout-pay-panel h2,
.checkout-status-box h2 {
margin: 0 0 0.75rem;
font-size: 1rem;
color: var(--color-text);
}
.shipping-checkout__payment-option {
display: block;
}
.shipping-checkout__payment-option input {
display: none;
}
.shipping-checkout__payment-card {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid
color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
border-radius: 1rem;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 6%, var(--bg-1)),
color-mix(in srgb, var(--bg-1) 94%, var(--color-surface))
);
}
.shipping-checkout__payment-radio {
width: 1rem;
height: 1rem;
border-radius: 999px;
border: 2px solid var(--color-primary);
position: relative;
flex: 0 0 auto;
}
.shipping-checkout__payment-radio::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 999px;
background: transparent;
}
.shipping-checkout__payment-option input:checked + .shipping-checkout__payment-card .shipping-checkout__payment-radio::after {
background: var(--color-primary);
}
.shipping-checkout__payment-card img {
width: 92px;
max-width: 100%;
height: auto;
object-fit: contain;
}
.shipping-checkout__payment-options {
gap: 0.85rem;
}
.shipping-checkout__payment-card small {
display: block;
color: var(--color-text-muted);
margin-top: 0.18rem;
}
@media (min-width: 992px) {
/* Show payment options side-by-side on wide screens */
.shipping-checkout__payment-option {
display: inline-flex;
width: calc(50% - 0.5rem);
min-width: calc(50% - 0.5rem);
vertical-align: top;
margin-right: 0.85rem;
margin-bottom: 0.85rem;
box-sizing: border-box;
}
.shipping-checkout__payment-option:nth-of-type(2n) {
margin-right: 0;
}
.shipping-checkout__payment-card {
width: 100%;
}
}
.shipping-checkout__actions {
margin-top: 1.1rem;
}
.shipping-checkout__submit {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 0;
border-radius: 999px;
background: linear-gradient(
135deg,
var(--color-primary),
color-mix(in srgb, var(--color-secondary) 32%, var(--color-primary))
);
color: var(--color-primary-contrast);
padding: 1rem 1.25rem;
font-weight: 700;
box-shadow: 0 18px 34px
color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.shipping-checkout__submit strong {
font-size: 1rem;
white-space: nowrap;
}
.shipping-checkout__submit:hover {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 86%, black),
color-mix(in srgb, var(--color-secondary) 38%, var(--color-primary))
);
color: var(--color-primary-contrast);
}
.shipping-checkout__promo-block {
margin-top: 1.25rem;
padding-top: 1.1rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
}
.shipping-checkout__promo-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.shipping-checkout__promo-note {
color: var(--color-text-muted);
font-size: 0.92rem;
}
.shipping-checkout__promo-feedback {
min-height: 1.3rem;
margin: 0.55rem 0 0;
font-size: 0.92rem;
color: var(--color-text-muted);
}
.shipping-checkout__promo-feedback.is-success {
color: var(--color-success);
}
.shipping-checkout__promo-feedback.is-error {
color: var(--color-error);
}
.shipping-checkout__promo-feedback.is-pending {
color: var(--color-warning);
}
.shipping-checkout__spinner {
width: 0.95rem;
height: 0.95rem;
border-radius: 999px;
border: 2px solid
color-mix(in srgb, var(--color-primary-contrast) 24%, transparent);
border-top-color: var(--color-primary-contrast);
animation: shippingPromoSpin 0.8s linear infinite;
}
@keyframes shippingPromoSpin {
to {
transform: rotate(360deg);
}
}
.shipping-checkout__totals {
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
display: grid;
gap: 0.55rem;
}
.shipping-checkout__totals > div {
display: flex;
justify-content: space-between;
gap: 1rem;
color: var(--color-text-muted);
}
.shipping-checkout__totals-row--grand {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
}
.checkout-pay-page,
.checkout-status-page {
min-height: 100vh;
margin: 0;
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 12%, transparent),
transparent 24rem
),
linear-gradient(
180deg,
color-mix(in srgb, var(--color-accent) 5%, var(--color-bg)),
var(--color-bg)
);
}
.checkout-pay-shell,
.checkout-status-shell {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1rem;
}
.checkout-pay-card,
.checkout-status-card {
padding: 1.6rem;
}
.checkout-pay-card__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.checkout-pay-grid,
.checkout-status-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
gap: 1.25rem;
}
.checkout-pay-panel,
.checkout-status-box {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 1.25rem;
padding: 1.25rem;
background: #fff;
}
.checkout-pay-panel--accent {
background: linear-gradient(
180deg,
rgba(253, 242, 248, 0.95),
rgba(255, 255, 255, 0.98)
);
}
.checkout-pay-method {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1.35rem;
}
.checkout-pay-method__logo {
width: 110px;
height: auto;
}
.checkout-pay-method p,
.checkout-pay-total__meta,
.checkout-pay-total__note {
color: #64748b;
}
.checkout-pay-summary,
.checkout-status-box {
display: grid;
gap: 0.7rem;
}
.checkout-pay-summary div,
.checkout-status-box p {
display: flex;
justify-content: space-between;
gap: 1rem;
margin: 0;
color: #475569;
}
.checkout-pay-total__title {
margin-bottom: 0.75rem;
}
.checkout-pay-total__amount {
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1;
font-weight: 800;
color: #be123c;
margin-bottom: 0.75rem;
}
.checkout-pay-total__note {
margin-top: 1rem;
font-size: 0.92rem;
}
.checkout-status-card {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.checkout-status-card__icon {
width: 76px;
height: 76px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
}
.checkout-status-card__icon.is-success {
background: #dcfce7;
color: #166534;
}
.checkout-status-card__icon.is-failed {
background: #fee2e2;
color: #b91c1c;
}
.checkout-status-grid {
margin-top: 1.5rem;
text-align: left;
}
.checkout-status-box--single {
max-width: 460px;
margin: 1.5rem auto 0;
text-align: left;
}
.checkout-status-actions {
margin-top: 1.5rem;
display: flex;
justify-content: center;
gap: 0.9rem;
flex-wrap: wrap;
}
@media (max-width: 991.98px) {
.shipping-checkout__hero,
.checkout-pay-card__head {
flex-direction: column;
align-items: flex-start;
}
.shipping-checkout__panel--summary {
position: static;
top: auto;
}
.checkout-pay-grid,
.checkout-status-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 575.98px) {
.shipping-checkout__hero,
.shipping-checkout__panel,
.checkout-pay-card,
.checkout-status-card {
border-radius: 1.1rem;
padding: 1.15rem;
}
.shipping-checkout__promo-row {
grid-template-columns: 1fr;
}
}
.cart-price-stack,
.cart-line-price {
display: inline-flex;
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: 0.2rem 0.55rem;
}
.cart-summary__totals {
display: inline-flex;
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.2rem 0.55rem;
}
.cart-item__chip .cart-price-stack__original,
.cart-item__chip .cart-line-price__original,
.cart-summary__original-total {
color: color-mix(in srgb, var(--color-text-muted) 88%, #64748b);
font-size: 0.78rem;
font-weight: 500;
text-decoration: line-through;
}
.cart-item__chip .cart-price-stack__current,
.cart-item__chip .cart-line-price__current,
.cart-summary__totals [data-cart-subtotal] {
color: #ea580c !important;
font-size: 0.98rem;
font-weight: 700;
}
.cart-item__chip--price .cart-price-stack {
gap: 0.15rem 0.45rem;
}
.cart-item__chip--price .cart-price-stack__original,
.cart-item__chip--price .cart-price-stack__current {
white-space: nowrap;
}
.cart-item__chip--total .cart-line-price {
gap: 0.15rem 0.4rem;
}
.cart-item__chip--total .cart-line-price__original,
.cart-item__chip--total .cart-line-price__current {
white-space: nowrap;
}
.cart-price-stack__badge {
display: none;
}
.cart-summary__row--discount strong {
color: var(--color-success);
}
.cart-page__hero .btn {
padding: 0.45rem 0.9rem;
font-size: 0.88rem;
line-height: 1.2;
}
.cart-empty {
padding: 3rem 1.5rem;
border-radius: 1.5rem;
}
.cart-empty__icon {
width: 4rem;
height: 4rem;
margin: 0 auto 1rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
font-size: 1.5rem;
}
.cart-list {
display: grid;
gap: 0.75rem;
}
.cart-item {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 0.5rem;
padding: 0.8rem;
border: 1px solid var(--color-border);
border-radius: 1.35rem;
background: var(--color-surface);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}
.cart-item__media {
display: block;
width: 88px;
height: 118px;
border-radius: 1rem;
overflow: hidden;
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
display: flex;
align-items: center;
justify-content: center;
}
.cart-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cart-item__media .book-detail__side-fallback {
width: 42px;
height: 42px;
object-fit: contain;
opacity: 0.6;
}
.cart-item__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.cart-item__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.cart-item__title {
display: inline-block;
color: var(--color-text);
text-decoration: none;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
}
.cart-item__author {
color: var(--color-text-muted);
/* margin-top: 0.18rem; */
font-size: 0.88rem;
}
.cart-item__caption--mobile {
display: none;
}
.cart-item__meta {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.cart-item__chip {
min-width: 7.1rem;
display: inline-flex;
flex-direction: column;
gap: 0.18rem;
padding: 0.58rem 0.72rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
border: 1px solid var(--color-border);
}
.cart-item__chip span {
font-size: 0.68rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.cart-item__chip strong {
font-size: 0.92rem;
}
.cart-item__chip--total {
background: color-mix(
in srgb,
var(--color-secondary) 12%,
var(--color-surface)
);
}
.cart-item__chip--price,
.cart-item__chip--total {
min-width: 0;
}
.cart-qty {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.cart-qty.is-busy {
opacity: 0.6;
}
.cart-qty__btn {
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
padding-top: 3px;
}
.cart-qty__btn:hover,
.cart-qty__btn:focus {
border-color: var(--color-primary);
color: var(--color-primary);
}
.cart-item__chip--quantity strong {
min-width: 1.35rem;
text-align: center;
}
.cart-item__remove--chip {
display: none;
width: 100%;
justify-content: center;
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
border-color: color-mix(
in srgb,
var(--color-danger, #dc3545) 28%,
var(--color-border)
);
color: var(--color-danger, #dc3545);
height: 100%;
align-items: center;
}
.cart-item__remove--chip:hover,
.cart-item__remove--chip:focus {
border-color: color-mix(
in srgb,
var(--color-danger, #dc3545) 55%,
var(--color-border)
);
color: var(--color-danger, #dc3545);
}
.cart-summary {
position: sticky;
top: 6.5rem;
border-radius: 1.5rem;
overflow: hidden;
}
.cart-summary .card-body {
padding: 1.5rem;
}
.cart-summary__title {
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 0.4rem;
}
.cart-summary__copy {
color: var(--color-text-muted);
margin-bottom: 1rem;
}
.cart-summary__rows {
display: grid;
gap: 0.85rem;
}
.cart-summary__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
border: 1px solid var(--color-border);
}
.cart-summary__row span {
color: var(--color-text-muted);
}
.cart-summary__row strong {
font-size: 1rem;
}
.cart-summary__row--total {
background: color-mix(
in srgb,
var(--color-secondary) 12%,
var(--color-surface)
);
}
.cart-summary__row--total strong {
font-size: 1.08rem;
}
.cart-summary__note {
margin-top: 1rem;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.cart-mobile-summary {
display: none;
}
@media (max-width: 991.98px) {
.cart-page__hero {
flex-direction: column;
align-items: stretch;
padding: 0.95rem 1rem;
}
.cart-page__hero-actions {
justify-content: flex-start;
}
.cart-summary {
position: static;
}
.cart-mobile-summary {
display: block;
position: fixed;
left: 0.7rem;
right: 4.9rem;
bottom: calc(3.95rem + env(safe-area-inset-bottom, 0px));
z-index: 4;
border-radius: 1.2rem;
overflow: hidden;
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 18%, transparent),
transparent 42%
),
linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 0%,
color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)) 100%
);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
border: 1px solid var(--color-border);
}
.cart-mobile-summary.card {
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 18%, transparent),
transparent 42%
),
linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 0%,
color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)) 100%
) !important;
}
.cart-mobile-summary .card-body {
padding: 0.42rem 0.7rem;
background: transparent;
}
.cart-mobile-summary__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
flex-wrap: nowrap;
}
.cart-mobile-summary__left {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.cart-mobile-summary__label {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
line-height: 1;
}
.cart-mobile-summary__title {
font-size: 0.9rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.1;
}
.cart-mobile-summary__subtotal {
text-align: right;
display: grid;
gap: 0.1rem;
flex: 0 0 auto;
}
.cart-mobile-summary__subtotal span {
font-size: 0.62rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1;
}
.cart-mobile-summary__subtotal strong {
font-size: 0.95rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1.05;
}
.cart-mobile-summary__checkout {
min-height: 34px;
font-size: 0.82rem;
padding: 0.38rem 0.72rem;
white-space: nowrap;
flex: 0 0 auto;
}
.cart-summary--desktop {
display: none;
}
.cart-page .container {
padding-bottom: 6.1rem;
}
}
@media (max-width: 575.98px) {
.cart-page__hero {
gap: 0.75rem;
padding: 0.85rem 0.9rem;
}
.cart-page__title {
font-size: 1.15rem;
}
.cart-page__subtitle {
font-size: 0.86rem;
}
.cart-page__mini-stat {
min-width: 5.8rem;
padding: 0.45rem 0.65rem;
}
.cart-page__hero .btn {
width: 100%;
justify-content: center;
}
.cart-item {
grid-template-columns: 84px minmax(0, 1fr);
grid-template-areas:
"media caption"
"body body";
gap: 0.5rem 0.55rem;
padding: 0.62rem;
}
.cart-item__media {
grid-area: media;
width: 84px;
height: 110px;
}
.cart-item__caption--mobile {
grid-area: caption;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.2rem;
align-self: center;
padding: 0;
min-width: 0;
}
.cart-item__body {
grid-area: body;
gap: 0.18rem;
}
.cart-item__head {
flex-direction: column;
gap: 0.35rem;
}
.cart-item__head > div {
display: none;
}
.cart-item__caption--mobile {
display: block;
padding: 0 0.05rem;
}
.cart-item__title {
font-size: 0.88rem;
line-height: 1.25;
}
.cart-item__author {
font-size: 0.76rem;
line-height: 1.25;
}
.cart-item__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.3rem;
}
.cart-item__chip {
min-width: 0;
padding: 0.38rem 0.5rem;
border-radius: 0.8rem;
}
.cart-item__chip strong {
font-size: 0.8rem;
}
.cart-item__chip span {
font-size: 0.58rem;
}
.cart-qty {
gap: 0.26rem;
}
.cart-qty__btn {
width: 1.4rem;
height: 1.4rem;
}
.cart-item__remove {
align-self: flex-start;
padding: 0.32rem 0.45rem;
min-width: 2rem;
}
.cart-item__remove--head {
display: none;
}
.cart-item__remove span {
display: none;
}
.cart-item__remove i {
margin-right: 0 !important;
}
.cart-item__remove--chip {
display: inline-flex;
min-width: 0;
padding-inline: 0.5rem;
}
.cart-mobile-summary {
left: 0.6rem;
right: 4.45rem;
bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
}
.cart-page .container {
padding-bottom: 6.4rem;
}
}
/* Utility helpers for background + text pairs */
.bg-1 {
background: var(--bg-1);
color: var(--bg-1-text);
}
.bg-2 {
background: var(--bg-2);
color: var(--bg-2-text);
}
.bg-3 {
background: var(--bg-3);
color: var(--bg-3-text);
}
.bg-4 {
background: var(--bg-4);
color: var(--bg-4-text);
}
.bg-5 {
background: var(--bg-5);
color: var(--bg-5-text);
}
.bg-6 {
background: var(--bg-6);
color: var(--bg-6-text);
}
.bg-7 {
background: var(--bg-7);
color: var(--bg-7-text);
}
.bg-8 {
background: var(--bg-8);
color: var(--bg-8-text);
}
.text-primary {
color: var(--color-primary);
}
.text-secondary {
color: var(--color-secondary);
}
.text-accent {
color: var(--color-accent);
}
.text-success {
color: var(--color-success);
}
.text-warning {
color: var(--color-warning);
}
.text-error {
color: var(--color-error);
}
/* ========================================
Header (site-header)
======================================== */
.site-header {
position: relative;
z-index: 1000;
background: var(--color-surface);
color: var(--color-text);
}
/* Top bar */
.site-header .header-top {
background: var(--color-muted);
border-bottom: 1px solid var(--color-border);
}
.site-header .header-top .container {
min-height: 2.5rem;
}
.site-header .header-top .btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* Main header */
.site-header .header-main {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
/* box-shadow: var(--shadow-soft); */
}
.site-header .header-main img {
display: block;
}
.site-header .header-main .btn {
border-color: var(--color-border);
}
.site-header .header-main .btn svg {
flex: 0 0 auto;
}
.site-header .header-main .input-group .form-control {
min-width: 14rem;
}
.site-header .header-main .btn-primary {
white-space: nowrap;
}
/* Header search input polish */
.site-header .input-group .input-group-text,
.site-header .input-group .form-control {
background-color: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
}
.site-header .input-group .form-control::placeholder {
color: var(--color-text-muted);
}
/* Dropdowns in header */
.site-header .dropdown-menu {
border: 1px solid var(--color-border);
box-shadow: var(--shadow-dropdown);
border-radius: var(--radius-md);
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
background: var(--color-hover);
color: var(--color-primary);
}
/* Buttons (header-only tweaks) */
.site-header .btn-outline-secondary {
color: var(--color-text);
border-color: var(--color-border);
}
.site-header .btn-outline-secondary:hover,
.site-header .btn-outline-secondary:focus {
background: var(--color-hover);
color: var(--color-primary);
border-color: color-mix(
in srgb,
var(--color-primary) 35%,
var(--color-border)
);
}
.user-menu__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border-radius: 999px;
border: 2px solid
color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
background: color-mix(in srgb, var(--color-surface) 96%, white);
}
.user-menu__trigger::after {
display: none;
}
.user-menu__avatar {
width: 100%;
height: 100%;
border-radius: 999px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 18%, white),
color-mix(in srgb, var(--color-secondary) 16%, white)
);
color: var(--color-primary);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.user-menu__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-menu__dropdown {
min-width: 260px;
padding: 0.5rem;
border-radius: 1rem;
}
.user-menu__head {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.5rem;
margin-bottom: 0.35rem;
}
.user-menu__avatar--lg {
width: 2.75rem;
height: 2.75rem;
flex: 0 0 auto;
font-size: 0.95rem;
}
.user-menu__meta {
min-width: 0;
}
.user-menu__meta strong,
.user-menu__meta span {
display: block;
line-height: 1.35;
}
.user-menu__meta span {
color: var(--color-text-muted);
font-size: 0.84rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-menu__item {
display: flex;
align-items: center;
gap: 0.7rem;
border-radius: 0.8rem;
padding: 0.7rem 0.85rem;
}
.user-menu__item i {
font-size: 1rem;
}
/* .user-menu__item--with-badge {
justify-content: space-between;
} */
.user-menu__badge,
.mobile-chat-link__badge,
.chat-widget__badge {
min-width: 1.2rem;
height: 1.2rem;
padding: 0 0.35rem;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-chat-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.user-menu__item--danger {
color: #dc3545;
}
.user-menu__item--danger:hover,
.user-menu__item--danger:focus {
color: #dc3545;
}
/* Responsive */
@media (max-width: 991px) {
.site-header .header-main {
gap: var(--space-3);
}
}
@media (max-width: 767px) {
.site-header .header-main {
padding-top: var(--space-2);
padding-bottom: var(--space-2);
}
.site-header .header-main img {
height: 2.5rem;
}
}
/* ========================================
Menu (Primary + Mobile)
======================================== */
nav[role="navigation"] {
background: var(--bg-2);
color: var(--bg-2-text);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 900;
}
nav[role="navigation"] .container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: var(--space-2);
position: relative;
}
.site-nav {
background: var(--bg-2);
color: var(--bg-2-text);
border-bottom: 1px solid var(--color-border);
transition:
box-shadow 180ms ease,
border-color 180ms ease,
background-color 180ms ease;
}
.site-nav.is-stuck {
background: var(--bg-1);
box-shadow: var(--shadow-soft);
}
.site-nav .nav-left {
position: absolute;
left: 0;
top: 50%;
display: inline-flex;
align-items: center;
gap: var(--space-2);
opacity: 0;
transform: translateY(-50%) translateX(-16px);
transition:
opacity 240ms ease,
transform 240ms ease;
pointer-events: none;
}
.site-nav .nav-left .nav-logo-img {
height: 3rem;
width: auto;
display: block;
}
.site-brand {
display: inline-flex;
align-items: center;
}
.site-header .site-brand__full-logo {
height: 3rem;
width: auto;
display: block;
}
.site-header .site-brand__icon-logo {
display: none !important;
height: 2.5rem;
width: auto;
}
.header-search-icon-btn {
width: 2.35rem;
height: 2.35rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.site-nav .nav-links {
display: flex;
align-items: center;
gap: var(--space-2);
}
.site-nav .nav-right {
position: absolute;
right: 0;
top: 50%;
display: inline-flex;
align-items: center;
gap: 0.5rem;
opacity: 0;
transform: translateY(-50%) translateX(12px);
transition:
opacity 240ms ease,
transform 240ms ease;
pointer-events: none;
}
.site-nav .nav-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.4rem 0.75rem;
border-radius: 9999px;
background: var(--color-primary);
color: var(--color-primary-contrast);
text-decoration: none;
font-weight: 600;
box-shadow: 0 8px 18px rgba(79, 70, 229, 0.18);
transition:
transform 140ms ease,
box-shadow 140ms ease;
white-space: nowrap;
}
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(79, 70, 229, 0.24);
}
.site-nav.is-stuck .container {
justify-content: center;
}
.site-nav.is-stuck .nav-left {
opacity: 1;
transform: translateY(-50%) translateX(0);
pointer-events: auto;
}
.site-nav.is-stuck .nav-right {
opacity: 1;
transform: translateY(-50%) translateX(0);
pointer-events: auto;
}
nav[role="navigation"] .nav-link {
position: relative;
font-weight: 600;
}
nav[role="navigation"] .nav-link::after {
content: "";
position: absolute;
left: 0.5rem;
right: 0.5rem;
bottom: 0.2rem;
height: 2px;
background: var(--color-primary);
opacity: 0;
transform: scaleX(0.6);
transition:
opacity 160ms ease,
transform 160ms ease;
}
nav[role="navigation"] .nav-link:hover::after,
nav[role="navigation"] .nav-link:focus::after,
nav[role="navigation"] .nav-link-active::after {
opacity: 1;
transform: scaleX(1);
}
nav[role="navigation"] .nav-link {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.85rem;
border-radius: var(--radius-sm);
color: var(--color-text);
text-decoration: none;
transition:
background-color 140ms ease,
color 140ms ease,
transform 140ms ease;
}
nav[role="navigation"] .nav-link:hover,
nav[role="navigation"] .nav-link:focus {
background: var(--color-hover);
color: var(--color-primary);
transform: translateY(-1px);
}
nav[role="navigation"] .nav-link-active {
background: var(--color-primary);
color: var(--color-primary-contrast);
box-shadow: 0 6px 18px rgba(79, 70, 229, 0.12);
}
/* Mobile menu overlay */
#mobile-menu {
position: fixed;
inset: 0;
background: color-mix(in srgb, var(--bg-3) 80%, transparent);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
z-index: 1002;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 220ms ease,
visibility 0s linear 220ms;
}
#mobile-menu.hidden {
display: block;
}
#mobile-menu.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
opacity 220ms ease,
visibility 0s;
}
#menu-content {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: min(80%, 20rem);
background: var(--color-surface);
border-right: 1px solid var(--color-border);
box-shadow: var(--shadow-soft);
transform: translateX(-100%);
transition: transform 220ms ease;
}
#menu-content.open {
transform: translateX(0);
}
#mobile-menu .nav-link {
display: block;
padding: 0.65rem 0.9rem;
border-radius: var(--radius-sm);
}
#mobile-menu .mobile-menu__item {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.48rem 0.72rem;
}
#mobile-menu .mobile-menu__item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 0.65rem;
background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
color: var(--color-primary);
flex: 0 0 auto;
}
#mobile-menu .mobile-menu__item-label {
flex: 1 1 auto;
}
#mobile-menu .mobile-menu__item.nav-link-active {
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-primary);
box-shadow: inset 0 0 0 1px
color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
}
#mobile-menu .mobile-menu__item.nav-link-active .mobile-menu__item-icon {
background: color-mix(
in srgb,
var(--color-primary) 18%,
var(--color-surface)
);
color: var(--color-primary);
}
#mobile-menu .mobile-menu__item.nav-link-active .mobile-menu__item-label {
font-weight: 700;
}
/* Mobile menu header/body */
.mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.mobile-menu__body {
padding: var(--space-4);
overflow-y: auto;
max-height: calc(100vh - 4rem);
}
.menu-logo {
height: 2.5rem;
width: auto;
}
#mobile-menu-close {
border-color: var(--color-border);
}
@media (max-width: 991.98px) {
#mobile-menu .nav-link {
padding: 0.45rem 0.6rem;
}
#mobile-menu .mobile-menu__item {
padding: 0.42rem 0.58rem;
}
}
@media (min-width: 992px) {
#mobile-menu {
display: none !important;
}
nav[role="navigation"] .container {
display: flex;
}
}
@media (max-width: 991.98px) {
nav[role="navigation"] .container {
display: none;
}
}
/* ========================================
Footer + Hotline
======================================== */
.hotline-section {
padding: var(--space-4);
margin-bottom: var(--space-5);
background: var(--bg-2);
color: var(--bg-2-text);
}
.hotline-text {
font-size: 0.95rem;
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.hotline-title {
font-size: 1.75rem;
font-weight: 700;
margin: 0;
}
.hotline-number {
color: var(--color-error);
font-weight: 800;
}
.site-footer {
background: var(--bg-2);
color: var(--bg-2-text);
padding: var(--space-6) 0 var(--space-4);
}
.mobile-bottom-nav {
position: fixed;
left: 0.8rem;
right: 0.8rem;
bottom: 0.7rem;
z-index: 1045;
display: none;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: end;
padding: 0.38rem 0.38rem calc(0.38rem + env(safe-area-inset-bottom, 0px));
background: color-mix(in srgb, #ffffff 88%, var(--color-surface) 12%);
border: 1px solid color-mix(in srgb, var(--color-border) 96%, #cbd5e1 4%);
border-radius: 1.45rem;
box-shadow:
0 10px 24px rgba(15, 23, 42, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.35);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.mobile-bottom-nav__item {
position: relative;
display: grid;
justify-items: center;
gap: 0.16rem;
padding: 0.18rem 0.12rem 0.06rem;
border-radius: 1rem;
color: color-mix(in srgb, var(--color-text) 66%, var(--color-text-muted) 34%);
text-decoration: none;
transition: color 160ms ease;
}
.mobile-bottom-nav__icon-wrap {
position: relative;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
transition:
background-color 160ms ease,
color 160ms ease;
}
.mobile-bottom-nav__item i {
font-size: 1.1rem;
line-height: 1;
}
.mobile-bottom-nav__label {
font-size: 0.68rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.01em;
color: inherit;
}
.mobile-bottom-nav__item.is-active {
color: var(--color-primary);
}
.mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon-wrap {
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
color: var(--color-primary);
}
.mobile-bottom-nav__badge {
position: absolute;
top: -0.15rem;
right: -0.25rem;
min-width: 1rem;
height: 1rem;
padding: 0 0.25rem;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-size: 0.62rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-5);
}
.footer-col {
display: flex;
flex-direction: column;
gap: 0.38rem;
}
.footer-title {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 0.1rem;
}
.footer-text {
font-size: 0.95rem;
color: var(--color-text-muted);
margin-bottom: 0.1rem;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-2);
}
.footer-link {
color: var(--color-text-muted);
text-decoration: none;
transition: color 140ms ease;
}
.footer-link:hover,
.footer-link:focus {
color: var(--color-primary);
}
.footer-contact {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-muted);
flex-wrap: wrap;
/* justify-content: center; */
text-align: center;
}
.footer-link--inline {
color: inherit;
font-weight: 600;
text-decoration: none;
}
.footer-link--inline:hover,
.footer-link--inline:focus {
color: var(--color-primary);
}
.footer-contact__separator {
color: var(--color-text-muted);
}
.footer-social {
display: flex;
gap: var(--space-3);
}
.footer-social-link {
color: var(--color-text);
transition:
color 140ms ease,
transform 140ms ease;
}
.footer-social-link:hover,
.footer-social-link:focus {
color: var(--color-primary);
transform: translateY(-1px);
}
.footer-form {
display: grid;
gap: 0.45rem;
width: 100%;
}
.footer-input {
width: 100%;
max-width: none;
border-radius: 9999px;
border: 1px solid
color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
background: color-mix(
in srgb,
var(--color-surface) 94%,
var(--color-primary) 6%
);
color: var(--color-text);
padding: 0.7rem 1rem;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background-color 160ms ease;
}
.footer-input::placeholder {
color: var(--color-text-muted);
}
.footer-input:focus {
outline: none;
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow: 0 0 0 3px
color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.footer-btn {
border-radius: 9999px;
border: 1px solid
color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 92%, white),
color-mix(in srgb, var(--color-primary) 78%, var(--color-secondary))
);
color: #fff;
padding: 0.68rem 1rem;
font-weight: 700;
transition:
transform 160ms ease,
box-shadow 160ms ease,
filter 160ms ease;
}
.footer-btn:hover,
.footer-btn:focus {
filter: brightness(1.02);
transform: translateY(-1px);
box-shadow: 0 10px 20px
color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.footer-divider {
height: 1px;
background: color-mix(in srgb, var(--color-border) 70%, transparent);
margin: var(--space-4) 0;
}
.footer-bottom {
text-align: center;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.footer-developed-by {
margin: 0.25rem 0 0;
font-size: 0.88rem;
color: var(--color-text-muted);
}
.footer-developed-by a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.footer-developed-by a:hover,
.footer-developed-by a:focus {
text-decoration: underline;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.site-footer .container {
text-align: center;
}
.footer-grid {
gap: 1rem;
justify-items: center;
}
.footer-col {
align-items: center;
text-align: center;
gap: 0.3rem;
}
.footer-col--quick-links {
display: none;
}
.footer-links {
justify-items: center;
}
.footer-contact {
justify-content: center;
}
.footer-social {
justify-content: center;
}
.footer-input {
margin-inline: auto;
max-width: none;
padding: 0.62rem 0.95rem;
}
.footer-form {
justify-items: stretch;
gap: 0.38rem;
width: 100%;
}
.footer-input,
.footer-btn {
width: 100%;
}
.footer-bottom {
text-align: center;
}
.site-footer {
padding-top: 2rem;
}
.footer-btn {
padding: 0.62rem 0.95rem;
font-size: 0.9rem;
}
}
/* --- Premium Authors Slider with Premium Pagination & Arrows --- */
.premium-authors-slider {
position: relative;
padding-bottom: 2rem;
}
/* Premium Arrow Buttons */
.splide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(40, 40, 40, 0.85);
color: #fff;
border: 2px solid rgba(255, 215, 0, 0.2);
font-size: 1.2rem;
box-shadow: 0 4px 12px rgba(35, 37, 38, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.splide-arrow--prev {
left: 0.5rem;
}
.splide-arrow--next {
right: 0.5rem;
}
.splide-arrow:hover {
background: #232526;
color: #ffd700;
border-color: #ffd700;
box-shadow: 0 6px 16px rgba(255, 215, 0, 0.3);
transform: translateY(-50%) scale(1.1);
}
/* Premium Pagination Dots */
.premium-authors-slider .splide__pagination {
bottom: -2rem;
}
.premium-authors-slider .splide__pagination__page {
width: 10px;
height: 10px;
background: rgba(35, 37, 38, 0.3);
border: 2px solid rgba(35, 37, 38, 0.5);
border-radius: 50%;
margin: 0 6px;
cursor: pointer;
transition: all 0.3s ease;
opacity: 1;
}
.premium-authors-slider .splide__pagination__page:hover {
background: rgba(255, 215, 0, 0.5);
border-color: #ffd700;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
transform: scale(1.2);
}
.premium-authors-slider .splide__pagination__page.is-active {
background: #ffd700;
border-color: #ffb300;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
width: 28px;
border-radius: 4px;
}
/* Featured Authors Slider - Distinct Card Style */
.featured-authors-head {
margin-bottom: 1.25rem !important;
}
.featured-authors-head > div {
width: 100%;
}
.featured-authors-head__top {
width: 100%;
}
.featured-authors-subtitle {
font-size: 0.96rem;
line-height: 1.5;
}
.featured-authors-cta {
padding-inline: 1rem !important;
padding-block: 0.58rem !important;
font-size: 0.9rem;
}
.featured-authors-splide .splide__track {
padding-top: 0.7rem !important;
padding-bottom: 2rem !important;
}
.featured-authors-splide .splide__slide {
height: auto;
}
.featured-author-card {
border-radius: var(--radius-lg);
box-shadow: 0 14px 30px rgba(2, 6, 23, 0.08);
transition:
transform 180ms ease,
box-shadow 180ms ease;
border-left: 4px solid var(--color-primary);
}
.featured-author-card:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(2, 6, 23, 0.12);
border-left-color: #0d6efd;
}
.featured-author-card .author-card-header {
background: linear-gradient(
135deg,
rgba(13, 110, 253, 0.08),
rgba(13, 110, 253, 0.03)
);
border-bottom: 1px solid rgba(13, 110, 253, 0.1);
}
.featured-author-card .author-photo-wrapper {
position: relative;
display: inline-block;
}
.featured-author-card .author-photo-wrapper img {
border: 3px solid var(--color-primary);
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}
.featured-author-card .author-name {
color: var(--color-primary);
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-author-card .author-bio {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.4em;
}
.featured-authors-splide .splide__pagination {
bottom: -2rem;
}
.featured-authors-splide .splide__pagination__page {
width: 10px;
height: 8px;
background: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
opacity: 1;
margin: 0 4px;
border-radius: 9999px;
transition:
width 180ms ease,
transform 160ms ease,
background-color 160ms ease;
}
.featured-authors-splide .splide__pagination__page.is-active {
background: var(--color-primary);
width: 26px;
transform: scale(1.02);
}
/* ============================================
REDESIGNED Featured Authors - Modern Style
============================================ */
.featured-author-card-v2 {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow: visible;
position: relative;
display: flex;
flex-direction: column;
}
[data-theme="dark"] .featured-author-card-v2 {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.featured-author-card-v2:hover {
border-color: var(--color-primary);
box-shadow: 0 16px 32px rgba(13, 110, 253, 0.15);
transform: translateY(-8px);
}
[data-theme="dark"] .featured-author-card-v2:hover {
box-shadow: 0 16px 32px rgba(139, 92, 246, 0.2);
}
/* Header section - clean background */
.author-card-header-v2 {
background: var(--bg-6);
position: relative;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 16px 16px 0 0;
flex-shrink: 0;
}
[data-theme="dark"] .author-card-header-v2 {
background: linear-gradient(
180deg,
var(--color-muted) 0%,
var(--color-surface) 100%
);
}
/* Photo wrapper */
.author-photo-wrapper-v2 {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.author-photo-v2 {
width: 140px;
height: 140px;
border-radius: 50%;
border: 4px solid var(--color-primary);
box-shadow:
0 0 0 1px var(--color-border),
0 12px 28px color-mix(in srgb, var(--color-primary) 18%, transparent);
object-fit: cover;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .author-photo-v2 {
box-shadow:
0 0 0 1px var(--color-border),
0 12px 28px rgba(139, 92, 246, 0.18);
}
.featured-author-card-v2:hover .author-photo-v2 {
transform: scale(1.05);
}
/* Author name styling */
.author-name-v2 {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-text);
margin: 0;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-theme="dark"] .author-name-v2 {
background: linear-gradient(135deg, #a78bfa, #2dd4bf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Author title/designation */
.author-title-v2 {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-muted);
}
/* Bio text */
.author-bio-v2 {
font-size: 0.95rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--color-text-muted);
}
/* Social links redesigned */
.social-links-v2 {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.social-icon-v2 {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 2px solid transparent;
font-size: 0.9rem;
color: white;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.social-icon-v2::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
z-index: -1;
}
/* Facebook icon */
.social-facebook {
background: #1877f2;
}
.social-facebook:hover {
background: var(--color-surface);
color: #1877f2;
border-color: #1877f2;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(24, 119, 242, 0.3);
}
[data-theme="dark"] .social-facebook:hover {
box-shadow: 0 6px 16px rgba(24, 119, 242, 0.5);
}
/* Twitter icon */
.social-twitter {
background: #1da1f2;
}
.social-twitter:hover {
background: var(--color-surface);
color: #1da1f2;
border-color: #1da1f2;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(29, 161, 242, 0.3);
}
[data-theme="dark"] .social-twitter:hover {
box-shadow: 0 6px 16px rgba(29, 161, 242, 0.5);
}
/* LinkedIn icon */
.social-linkedin {
background: #0a66c2;
}
.social-linkedin:hover {
background: var(--color-surface);
color: #0a66c2;
border-color: #0a66c2;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(10, 102, 194, 0.3);
}
[data-theme="dark"] .social-linkedin:hover {
box-shadow: 0 6px 16px rgba(10, 102, 194, 0.5);
}
/* Profile button */
.btn-profile-v2 {
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
color: var(--color-primary-contrast);
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-profile-v2:hover {
background: linear-gradient(
135deg,
var(--color-secondary),
var(--color-primary)
);
transform: translateY(-2px);
box-shadow: 0 8px 20px
color-mix(in srgb, var(--color-primary) 30%, transparent);
color: var(--color-primary-contrast);
text-decoration: none;
}
[data-theme="dark"] .btn-profile-v2 {
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
}
[data-theme="dark"] .btn-profile-v2:hover {
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.home-blog-section {
padding-inline: 0.9rem !important;
padding-top: 0.85rem !important;
padding-bottom: 2rem !important;
margin-bottom: 2rem !important;
}
.home-blog-section .container-fluid {
padding-inline: 0.25rem;
}
.home-blog-head {
margin-bottom: 0.9rem !important;
gap: 0.7rem !important;
}
.home-blog-head__top {
align-items: center !important;
}
.home-blog-head h2 {
font-size: 1.55rem !important;
}
.home-blog-subtitle {
font-size: 0.92rem;
line-height: 1.45;
}
.home-blog-cta {
padding: 0.48rem 0.82rem;
font-size: 0.84rem;
}
.home-blog-grid {
--bs-gutter-y: 0.9rem;
}
.blog-card {
border-radius: 1rem;
}
.blog-media {
height: 186px;
}
.blog-card .card-body {
padding: 0.8rem;
}
.blog-card__meta {
gap: 0.55rem;
row-gap: 0.28rem;
margin-bottom: 0.45rem !important;
font-size: 0.81rem;
}
.blog-title {
font-size: 1.06rem !important;
margin-bottom: 0.35rem !important;
}
.blog-excerpt {
-webkit-line-clamp: 3;
line-clamp: 3;
min-height: 0;
margin-bottom: 0.6rem !important;
font-size: 0.86rem;
line-height: 1.5;
}
.blog-avatar {
width: 30px;
height: 30px;
}
.blog-card .mt-auto.d-flex.align-items-center.gap-2 {
gap: 0.55rem !important;
}
.blog-card .small.fw-semibold {
font-size: 0.84rem;
}
.blog-card .text-muted.small {
font-size: 0.8rem;
}
.blog-card .mt-3.position-relative {
margin-top: 0.65rem !important;
}
.blog-card .btn.btn-outline-primary.btn-sm {
padding: 0.46rem 0.78rem;
font-size: 0.8rem;
}
.blog-card .mt-3.position-relative {
display: none;
}
.featured-authors-section {
padding-inline: 0.9rem !important;
margin-bottom: 2rem !important;
}
.featured-authors-section .container {
padding-inline: 0.25rem;
}
.featured-authors-head {
margin-bottom: 0.9rem !important;
gap: 0.7rem !important;
}
.featured-authors-head__top {
align-items: center !important;
}
.featured-authors-head h2 {
font-size: 1.55rem !important;
}
.featured-authors-subtitle {
font-size: 0.88rem;
line-height: 1.42;
}
.featured-authors-cta {
padding-inline: 0.86rem !important;
padding-block: 0.48rem !important;
font-size: 0.84rem;
}
.featured-authors-splide .splide__track {
padding-top: 0.4rem !important;
padding-bottom: 1.65rem !important;
}
.featured-authors-splide .splide__pagination {
bottom: -1.4rem;
}
.featured-authors-splide .splide__pagination__page {
width: 8px;
height: 8px;
margin: 0 3px;
}
.featured-authors-splide .splide__pagination__page.is-active {
width: 20px;
}
.featured-author-card-v2 {
border-radius: 1rem;
}
.author-photo-v2 {
width: 84px;
height: 84px;
border-width: 2px;
}
.author-name-v2 {
font-size: 0.96rem;
}
.author-card-header-v2 {
height: 106px;
}
.featured-author-card-v2 .card-body {
padding: 0.62rem !important;
}
.author-bio-v2 {
font-size: 0.77rem !important;
line-height: 1.34;
-webkit-line-clamp: 3;
line-clamp: 3;
margin-bottom: 0.42rem !important;
}
.social-links-v2 {
gap: 0.35rem;
margin-bottom: 0.42rem !important;
}
.social-icon-v2 {
width: 28px;
height: 28px;
font-size: 0.75rem;
}
.featured-author-card-v2 .btn.btn-primary.btn-sm {
font-size: 0.77rem !important;
padding: 0.45rem 0.62rem;
}
.featured-author-card-v2 .btn.btn-primary.btn-sm svg {
width: 12px;
height: 12px;
}
}
/* Book card title single line */
.book-card .card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Search bar enhancements */
.search-bar {
border-radius: 999px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.search-bar .search-icon {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-right: 0;
padding-left: 1rem;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.search-bar .search-input {
border: 1px solid var(--color-border);
border-left: 0;
box-shadow: none;
}
.search-bar .search-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px
color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.search-bar:focus-within .search-icon {
border-color: var(--color-primary);
color: var(--color-primary);
}
.search-bar .search-btn {
border-radius: 0;
background: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
color: #fff;
}
/* ========================================
Fortran Downloads
======================================== */
.download-section {
background: var(--color-bg);
}
.download-hero {
background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: clamp(1.75rem, 3vw, 2.5rem);
text-align: center;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.download-hero h1 {
font-size: clamp(2rem, 3vw, 2.75rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text);
}
.download-hero .hero-sub {
margin: 0;
color: var(--color-text-muted);
max-width: 52rem;
margin-left: auto;
margin-right: auto;
}
.download-hero::before,
.download-hero::after {
content: "";
position: absolute;
inset: auto;
border-radius: 999px;
opacity: 0.35;
pointer-events: none;
}
.download-hero::before {
width: 280px;
height: 280px;
top: -120px;
left: -120px;
background: radial-gradient(
circle,
color-mix(in srgb, var(--color-primary) 35%, transparent),
transparent 70%
);
}
.download-hero::after {
width: 340px;
height: 340px;
bottom: -160px;
right: -140px;
background: radial-gradient(
circle,
color-mix(in srgb, var(--color-secondary) 35%, transparent),
transparent 70%
);
}
.download-hero > * {
position: relative;
z-index: 1;
}
.download-grid {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
display: grid;
gap: clamp(1rem, 2.4vw, 1.75rem);
grid-template-columns: 1fr;
}
.download-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: clamp(1.25rem, 2.4vw, 1.75rem);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.download-card.featured {
border-color: rgba(79, 70, 229, 0.35);
box-shadow: 0 18px 40px rgba(79, 70, 229, 0.12);
}
.download-card.forlab-highlight {
background: linear-gradient(
140deg,
color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),
var(--color-surface)
);
border-color: color-mix(
in srgb,
var(--color-primary) 50%,
var(--color-border)
);
box-shadow: 0 22px 48px rgba(79, 70, 229, 0.18);
transform: translateY(-2px);
}
.badge-featured {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--color-primary);
color: var(--color-primary-contrast);
padding: 0.3rem 0.7rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.download-card .card-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.6rem;
}
.download-card .card-head i {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.8rem;
background: var(--color-hover);
color: var(--color-primary);
font-size: 1.2rem;
}
.forlab-logo {
width: 2.75rem;
height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.9rem;
/* background: var(--color-surface); */
border: 1px solid var(--color-border);
box-shadow: inset 0 0 0 2px
color-mix(in srgb, var(--color-primary) 15%, transparent);
overflow: hidden;
}
.forlab-logo img {
width: 75%;
height: 75%;
object-fit: contain;
display: block;
}
.download-card h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
}
.download-card .card-meta {
margin-bottom: 1.1rem;
color: var(--color-text-muted);
}
.download-card .action-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.dl-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 1.1rem;
border-radius: 999px;
border: 1px solid transparent;
background: var(--color-primary);
color: var(--color-primary-contrast);
font-weight: 600;
font-size: 0.95rem;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease;
text-decoration: none;
}
.dl-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 20px rgba(79, 70, 229, 0.2);
color: var(--color-primary-contrast);
}
.dl-btn.outline {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.dl-btn.outline:hover {
background: var(--color-hover);
color: var(--color-primary);
}
@media (min-width: 992px) {
.download-grid {
grid-template-columns: repeat(12, 1fr);
}
.download-card {
grid-column: span 12;
}
.download-card.half {
grid-column: span 6;
}
}
/* ========================================
Gallery
======================================== */
.gallery-card {
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
transition: all 300ms ease;
cursor: pointer;
background: var(--color-surface);
}
.gallery-img-wrapper {
height: 280px;
overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.gallery-img {
height: 100%;
width: 100%;
object-fit: cover;
transition:
transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
filter 300ms ease;
display: block;
}
.gallery-card:hover .gallery-img {
transform: scale(1.05);
filter: brightness(0.8);
}
.gallery-card-body {
padding: 1rem 1.1rem 1.2rem;
}
.gallery-title {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 0.4rem;
color: var(--color-text);
}
.gallery-caption {
margin: 0;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.gallery-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px
color-mix(in srgb, var(--color-primary) 18%, transparent);
border-color: var(--color-primary);
}
/* Category filter buttons */
.category-filter {
transition: all 200ms ease;
}
.category-filter:not(.active):hover {
transform: scale(1.05);
}
.category-filter.active {
background-color: var(--color-primary) !important;
color: var(--color-primary-contrast) !important;
border-color: var(--color-primary) !important;
}
/* Hide/show filtered items */
.gallery-item {
animation: galleryFadeIn 400ms ease-out;
}
.gallery-item.hidden {
display: none;
}
@keyframes galleryFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Dark mode */
[data-theme="dark"] .gallery-card {
background: var(--color-surface);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .gallery-card:hover {
border-color: var(--color-primary);
box-shadow: 0 20px 50px
color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.search-bar .search-clear {
border: none;
background: var(--color-surface);
font-size: 1.25rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.75rem;
}
/* Featured Authors Section Header */
.featured-authors-section {
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
position: relative;
overflow: hidden;
}
.featured-authors-section::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(79, 70, 229, 0.05), transparent);
border-radius: 50%;
pointer-events: none;
}
[data-theme="dark"] .featured-authors-section::before {
background: radial-gradient(circle, rgba(139, 92, 246, 0.08), transparent);
}
.featured-section-icon {
width: 50px;
height: 50px;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-contrast);
box-shadow: 0 4px 16px
color-mix(in srgb, var(--color-primary) 20%, transparent);
}
[data-theme="dark"] .featured-section-icon {
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}
/* ========================================
Books Page Sidebar & Pagination
======================================== */
.books-sidebar {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
margin-bottom: var(--space-5);
box-shadow: var(--shadow-soft);
}
.books-sidebar__title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: var(--space-3);
color: var(--color-primary);
}
.books-sidebar__section {
margin-bottom: var(--space-4);
}
.books-sidebar__label {
font-weight: 600;
color: var(--color-text);
font-size: 0.97rem;
margin-bottom: var(--space-2);
display: block;
}
.books-sidebar__select,
.books-sidebar__input {
width: 100%;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.7rem 1rem;
background: var(--color-muted);
color: var(--color-text);
font-size: 0.97rem;
margin-bottom: var(--space-2);
transition: all 200ms ease;
}
.books-sidebar__select:focus,
.books-sidebar__input:focus {
border-color: var(--color-primary);
outline: none;
background: var(--color-surface);
}
.books-sidebar__btn {
width: 100%;
border: 0;
border-radius: 999px;
padding: 0.7rem 1.5rem;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
color: var(--color-primary-contrast);
font-weight: 700;
font-size: 0.97rem;
box-shadow: 0 8px 20px
color-mix(in srgb, var(--color-primary) 18%, transparent);
cursor: pointer;
transition: all 250ms ease;
}
.books-sidebar__btn:hover {
background: linear-gradient(
135deg,
var(--color-secondary),
var(--color-primary)
);
color: var(--color-primary-contrast);
transform: translateY(-2px);
}
.books-mobile-filter-btn {
border: 1px solid
color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-text);
font-weight: 700;
border-radius: 999px;
padding: 0.72rem 1rem;
}
.books-mobile-filter-btn:hover {
background: color-mix(
in srgb,
var(--color-primary) 16%,
var(--color-surface)
);
color: var(--color-primary);
}
.books-filter-lock {
overflow: hidden;
}
.books-filter-sheet {
position: fixed;
inset: 0;
z-index: 1080;
display: none;
}
.books-filter-sheet.is-open {
display: block;
}
.books-filter-sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(2px);
}
.books-filter-sheet__panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 24px 24px 0 0;
box-shadow: 0 -14px 40px rgba(15, 23, 42, 0.18);
transform: translateY(100%);
transition: transform 220ms ease;
padding: 1rem 1rem 1.25rem;
max-height: 82vh;
overflow: auto;
}
.books-filter-sheet.is-open .books-filter-sheet__panel {
transform: translateY(0);
}
.books-filter-sheet__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
}
.books-filter-sheet__eyebrow {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
}
.books-filter-sheet__title {
font-size: 1.15rem;
font-weight: 800;
line-height: 1.15;
margin: 0.2rem 0 0;
}
.books-filter-sheet__close {
width: 38px;
height: 38px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
color: var(--color-text);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.books-filter-sheet__section {
margin-bottom: 0.95rem;
}
.books-filter-sheet__form {
display: flex;
flex-direction: column;
}
.books-filter-sheet__actions {
display: flex;
gap: 0.65rem;
margin-top: 0.3rem;
}
.books-filter-sheet__btn {
flex: 1 1 50%;
border: 0;
border-radius: 999px;
padding: 0.8rem 1rem;
font-weight: 700;
background: var(--color-primary);
color: #fff;
}
.books-filter-sheet__btn--ghost {
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-text);
border: 1px solid var(--color-border);
}
/* ========================================
Book Details Page
======================================== */
.book-detail-hero {
/* background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-secondary) 12%, transparent)); */
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: clamp(1.1rem, 2.2vw, 1.8rem);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.book-detail-back {
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
color: var(--color-text);
font-weight: 600;
margin-bottom: var(--space-4);
}
.book-detail-back:hover {
color: var(--color-primary);
}
.book-detail__cover {
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 0.35rem 0.8rem 0.18rem 0.8rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-soft);
max-width: 340px;
margin: 0 auto;
text-align: center;
overflow: visible;
position: relative;
}
.book-detail__discount-badge {
top: 0.55rem;
left: 0.55rem;
right: auto;
}
.book-detail__cover-hint {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-primary);
font-weight: 600;
margin-bottom: 0.6rem;
}
.book-detail__edition {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: flex-end;
margin-top: 0.5rem;
text-align: right;
font-size: 0.85rem;
color: var(--color-text);
font-weight: 600;
}
.book-detail__cover-hint i {
display: inline-block;
animation: qa-bounce 1.2s ease-in-out infinite;
}
@keyframes qa-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
.book-detail__cover-img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--radius-md);
}
.book-detail__cover-preview-trigger {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
.book-detail__cover-preview-trigger:focus-visible {
outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, white);
outline-offset: 4px;
border-radius: var(--radius-md);
}
.book-detail__cover-preview-trigger .book-detail__cover-img,
.book-detail__cover-preview-trigger .book-detail__cover-fallback-wrap {
transition:
transform 180ms ease,
box-shadow 180ms ease;
}
.book-detail__cover-preview-trigger:hover .book-detail__cover-img,
.book-detail__cover-preview-trigger:hover .book-detail__cover-fallback-wrap {
transform: translateY(-2px);
}
.book-detail__cover-fallback {
width: 96px;
max-width: 100%;
height: 96px;
object-fit: contain;
display: block;
opacity: 0.7;
}
.book-detail__cover-fallback-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
/* max-width: 160px; */
}
.book-detail__cover-fallback-box {
height: 192px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.book-detail__cover-note {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.book-detail__content {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
height: 100%;
box-shadow: none;
}
.book-detail__eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
font-size: 0.7rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.book-detail__title {
font-size: clamp(1.1rem, 1.9vw, 1.6rem);
font-weight: 800;
margin-bottom: 0.4rem;
}
.book-detail__author {
color: var(--color-text);
font-weight: 600;
font-size: 0.88rem;
margin-bottom: 0.8rem;
}
.book-detail__tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.5rem;
}
.book-detail__features-wrap {
margin-bottom: 0.9rem;
}
.book-detail__features-title {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.6rem 0;
color: var(--color-text);
}
.book-detail__features {
margin: 0;
padding-left: 0;
display: grid;
gap: 0.4rem;
font-size: 0.88rem;
color: var(--color-text);
}
.book-detail__feature-item {
list-style: none;
position: relative;
padding-left: 1.4rem;
}
.book-detail__feature-item::before {
content: "❀";
position: absolute;
left: 0;
top: 0.05rem;
color: var(--color-primary);
font-size: 0.85rem;
}
.book-detail__feature-item.is-hidden {
display: none;
}
.book-detail__features-empty {
font-size: 0.88rem;
margin: 0;
}
.book-detail__features-toggle {
margin-top: 0.5rem;
border: 0;
background: transparent;
color: var(--color-primary);
font-weight: 600;
font-size: 0.88rem;
padding: 0;
}
.book-detail__features-toggle:hover {
text-decoration: underline;
}
.book-detail__modal {
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-soft);
background: var(--color-surface);
color: var(--color-text);
}
.book-detail__modal .modal-header {
border-bottom: 1px solid var(--color-border);
}
.book-detail__modal .modal-title {
color: var(--color-text);
}
.book-detail__modal .btn-close {
filter: invert(1) !important;
opacity: 0.7;
}
.book-detail__modal .modal-body {
color: var(--color-text);
}
.book-detail__preview-modal .modal-body {
padding: 0.9rem;
}
.book-detail__preview-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.8rem;
flex-wrap: wrap;
}
.book-detail__preview-meta {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
.book-detail__preview-badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.book-detail__preview-pagecount {
color: var(--color-text-muted);
font-size: 0.84rem;
}
.book-detail__preview-frame-wrap {
height: min(78vh, 980px);
overflow: auto;
border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-bg) 72%, black);
padding: 0.9rem;
}
.book-detail__preview-loading {
min-height: 160px;
display: grid;
place-items: center;
color: var(--color-text-muted);
font-size: 0.9rem;
text-align: center;
padding: 1rem;
}
.book-detail__preview-loading[hidden] {
display: none;
}
.book-detail__preview-pages {
display: grid;
gap: 1rem;
justify-items: center;
}
.book-detail__preview-page {
width: 100%;
display: grid;
gap: 0.45rem;
justify-items: center;
}
.book-detail__preview-page-label {
color: var(--color-text-muted);
font-size: 0.78rem;
font-weight: 600;
}
.book-detail__preview-canvas {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
background: white;
}
@media (max-width: 575px) {
.book-detail-hero {
padding: 0.5rem;
}
.book-detail__cover {
padding: 0.25rem 0.6rem 0.15rem 0.6rem;
}
.book-detail__cover-img {
aspect-ratio: 7 / 11;
}
.book-detail__cover-fallback-box {
height: auto;
aspect-ratio: 7 / 11;
min-height: 0;
}
.book-detail__panel {
padding: 0.7rem;
}
.book-detail__content {
padding-top: 0;
}
.book-detail__preview-frame-wrap {
padding: 0.6rem;
}
.book-detail__preview-toolbar {
align-items: stretch;
}
.book-detail__reviews-summary {
gap: 0.55rem;
margin-bottom: 0.7rem;
}
.book-detail__rating-overview,
.book-detail__rating-bars {
padding: 0.72rem 0.8rem;
}
.book-detail__share-label {
display: none;
}
}
.book-detail__features--modal {
gap: 0.6rem;
font-size: 0.9rem;
}
.book-detail__tag {
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
font-weight: 600;
font-size: 0.72rem;
}
.book-detail__price-row {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin-bottom: 1rem;
}
.book-detail__price {
min-width: 0;
}
.book-detail__price-stack,
.book-detail__spec-price,
.book-detail__side-price-stack {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.18rem;
}
.book-detail__price-stack {
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
}
.book-detail__side-price-stack {
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: 0.2rem 0.5rem;
}
.book-detail__price-original,
.book-detail__spec-price-original,
.book-detail__side-price-original {
color: var(--color-text-muted);
font-size: 0.88rem;
font-weight: 600;
text-decoration: line-through;
}
.book-detail__price-current {
font-size: 1.4rem;
font-weight: 800;
color: #ff8a00;
text-shadow: 0 6px 18px color-mix(in srgb, #ff8a00 35%, transparent);
}
.book-detail__spec-price-current {
color: #ff8a00;
}
.book-detail__side-price-current {
color: #ff8a00;
font-weight: 700;
}
.book-detail__price-badge,
.book-detail__spec-price-badge,
.book-detail__side-price-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.18rem 0.5rem;
border-radius: 999px;
background: linear-gradient(135deg, #ef4444, #f97316);
color: #fff;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.book-detail__price-badge {
display: none;
}
.book-detail__side-price-badge {
display: none;
}
.book-detail__currency {
color: var(--color-text);
font-weight: 600;
font-size: 0.82rem;
}
.book-detail__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 0.9rem;
}
.book-detail__secondary-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
}
.book-detail__share {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
padding: 0.3rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
border: 1px solid
color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}
.book-detail__secondary-actions .btn {
background: color-mix(
in srgb,
var(--color-primary) 12%,
var(--color-surface)
);
border: 1px solid
color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
color: var(--color-primary);
padding: 0.4rem 0.75rem 0.25rem 0.75rem;
line-height: 1.2;
}
.book-detail__secondary-actions .btn:hover {
background: color-mix(
in srgb,
var(--color-primary) 18%,
var(--color-surface)
);
color: var(--color-primary);
border-color: color-mix(
in srgb,
var(--color-primary) 55%,
var(--color-border)
);
}
.book-detail__wishlist-btn {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)) 0%,
color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 100%
) !important;
border-color: color-mix(
in srgb,
var(--color-primary) 42%,
var(--color-border)
) !important;
box-shadow: 0 10px 22px
color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.book-detail__share-label {
padding: 0 0.2rem 0 0.45rem;
color: var(--color-text-muted);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.book-detail__share-btn {
background: var(--color-surface) !important;
border-color: color-mix(
in srgb,
var(--color-primary) 18%,
var(--color-border)
) !important;
color: var(--color-text) !important;
box-shadow: none;
}
.book-detail__share-btn:hover {
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
}
.book-detail__share-btn--primary {
color: var(--color-primary) !important;
}
.book-detail__share-btn--icon {
min-width: 2.2rem;
padding-left: 0.65rem !important;
padding-right: 0.65rem !important;
}
.book-detail__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.9rem;
}
.book-detail__meta-item {
padding: 0.75rem 1rem;
background: var(--color-muted);
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.book-detail__meta-label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
font-weight: 700;
margin-bottom: 0.2rem;
}
.book-detail__meta-value {
font-weight: 700;
color: var(--color-text);
font-size: 0.92rem;
}
.book-detail__panel {
margin-top: clamp(1.5rem, 2.8vw, 2.5rem);
/* background: var(--color-surface); */
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: clamp(0.6rem, 1.2vw, 0.85rem);
box-shadow: var(--shadow-soft);
}
.book-detail__tabs .nav-tabs {
border-bottom: 0;
gap: 1.2rem;
position: relative;
}
.book-detail__tabs .nav-tabs::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--color-border);
}
.book-detail__tabs .nav-link {
border: 0;
color: var(--color-text);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.01em;
padding: 0.45rem 0;
border-radius: 0;
background: transparent;
position: relative;
transition: color 160ms ease;
}
.book-detail__tabs .nav-link.active {
color: var(--color-primary);
background: transparent;
}
.book-detail__tabs .nav-link.active::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--color-primary);
}
.book-detail__tabs .tab-content {
padding-top: 0.5rem;
color: var(--color-text);
}
.book-detail__authors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.85rem;
}
.book-detail__author-card {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 0.75rem;
align-items: center;
padding: 0.8rem;
border-radius: calc(var(--radius-md) + 2px);
border: 1px solid
color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)) 0%,
var(--color-surface) 100%
);
box-shadow: 0 10px 24px
color-mix(in srgb, var(--color-primary) 8%, transparent);
color: inherit;
text-decoration: none;
transition:
transform 220ms ease,
box-shadow 220ms ease,
border-color 220ms ease;
}
.book-detail__author-card:hover {
transform: translateY(-2px);
border-color: color-mix(
in srgb,
var(--color-primary) 28%,
var(--color-border)
);
box-shadow: 0 14px 28px
color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.book-detail__author-media {
width: 56px;
height: 56px;
}
.book-detail__author-photo {
width: 56px;
height: 56px;
border-radius: 16px;
display: block;
object-fit: cover;
border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
}
.book-detail__author-photo--placeholder {
display: grid;
place-items: center;
background: color-mix(
in srgb,
var(--color-primary) 14%,
var(--color-surface)
);
color: var(--color-primary);
font-weight: 800;
font-size: 1rem;
}
.book-detail__author-content {
min-width: 0;
}
.book-detail__author-name {
margin: 0;
font-size: 0.98rem;
line-height: 1.35;
}
.book-detail__author-role,
.book-detail__author-org {
margin: 0.18rem 0 0;
font-size: 0.84rem;
line-height: 1.45;
}
.book-detail__author-role {
color: var(--color-text);
font-weight: 600;
}
.book-detail__author-org {
color: var(--color-text-muted);
}
.book-detail__specs {
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
}
.book-detail__specs li {
list-style: none;
display: flex;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px dashed
color-mix(in srgb, var(--color-border) 70%, transparent);
padding-bottom: 0.4rem;
}
.book-detail__specs li span {
color: color-mix(in srgb, var(--color-text) 55%, var(--color-text-muted));
font-size: 0.85rem;
}
.book-detail__specs li strong {
color: var(--color-primary);
font-weight: 700;
}
/* Reviews */
.book-detail__reviews {
margin-top: 1.5rem;
}
.book-detail__reviews-meta {
margin: 0.2rem 0 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* .book-detail__reviews-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 1.2rem;
} */
.book-detail__review-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.9rem;
background: var(--color-surface);
}
.book-detail__review-head {
display: flex;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.4rem;
}
.book-detail__review-name {
font-weight: 700;
}
.book-detail__review-rating {
color: #ffb400;
font-size: 0.9rem;
}
.book-detail__review-text {
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
}
.book-detail__review-date {
margin-top: 0.4rem;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.book-detail__review-form {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.9rem;
background: var(--color-surface);
}
.book-detail__review-form h3 {
font-size: 1rem;
margin-bottom: 0.6rem;
}
.book-detail__review-actions {
margin-top: 0.4rem;
}
.book-detail__review-image img {
width: 100%;
max-width: 220px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
margin-top: 0.6rem;
}
.book-detail__rating {
display: inline-flex;
flex-direction: row-reverse;
gap: 0.15rem;
font-size: 1.3rem;
}
.book-detail__rating input {
display: none;
}
.book-detail__rating label {
cursor: pointer;
transition: transform 120ms ease;
color: color-mix(in srgb, var(--color-text) 40%, var(--color-border));
}
.book-detail__rating label:hover,
.book-detail__rating label:hover ~ label,
.book-detail__rating input:checked ~ label {
color: #ffb400;
transform: scale(1.05);
}
@media (max-width: 991px) {
.book-detail__reviews-grid {
grid-template-columns: 1fr;
}
}
.book-detail__reviews-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.8rem;
}
.book-detail__reviews-heading {
max-width: 42rem;
}
.book-detail__reviews-meta {
margin: 0.22rem 0 0;
font-size: 0.9rem;
line-height: 1.5;
}
.book-detail__reviews-summary {
display: grid;
grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
gap: 0.7rem;
margin-bottom: 0.8rem;
}
.book-detail__rating-overview,
.book-detail__rating-bars,
.book-detail__review-cta-card,
.book-detail__reviews-empty {
border: 1px solid
color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
border-radius: calc(var(--radius-md) + 2px);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)) 0%,
var(--color-surface) 100%
);
box-shadow: 0 10px 24px
color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.book-detail__rating-overview {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.8rem 0.9rem;
}
.book-detail__rating-score {
width: 76px;
height: 76px;
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
font-size: 1.65rem;
font-weight: 800;
color: var(--color-primary);
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
border: 1px solid
color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}
.book-detail__rating-stars {
color: color-mix(in srgb, #f6b73c 65%, var(--color-primary));
font-size: 0.98rem;
letter-spacing: 0.06em;
}
.book-detail__rating-stars span,
.book-detail__review-rating span {
color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}
.book-detail__rating-caption {
margin: 0.32rem 0 0;
color: var(--color-text-muted);
font-size: 0.88rem;
}
.book-detail__rating-bars {
padding: 0.8rem 0.9rem;
}
.book-detail__rating-bar-row {
display: grid;
grid-template-columns: 46px 1fr 24px;
align-items: center;
gap: 0.55rem;
}
.book-detail__rating-bar-row + .book-detail__rating-bar-row {
margin-top: 0.5rem;
}
.book-detail__rating-bar-label,
.book-detail__rating-bar-value {
font-size: 0.85rem;
font-weight: 700;
}
.book-detail__rating-bar-track {
position: relative;
height: 8px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--color-border) 82%, white);
}
.book-detail__rating-bar-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--color-primary) 58%, #ffd36c) 0%,
color-mix(in srgb, var(--color-primary) 78%, #f4a62a) 100%
);
}
.book-detail__reviews-grid {
align-items: start;
}
.book-detail__reviews-list {
column-count: 2;
column-gap: 0.7rem;
}
.book-detail__reviews-empty {
break-inside: avoid;
margin-bottom: 0.7rem;
}
.book-detail__review-card {
position: relative;
display: inline-block;
width: 100%;
break-inside: avoid;
margin-bottom: 0.7rem;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
border-radius: calc(var(--radius-md) + 2px);
padding: 0.8rem 0.9rem 0.85rem;
background:
radial-gradient(
circle at top right,
color-mix(in srgb, var(--color-primary) 7%, transparent) 0,
transparent 30%
),
var(--color-surface);
box-shadow: 0 8px 18px
color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.book-detail__review-card--featured {
padding: 0.75rem 0.75rem 0.85rem;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)) 0%,
var(--color-surface) 100%
);
box-shadow: 0 12px 24px
color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.book-detail__review-card--compact {
padding: 0.72rem 0.82rem 0.78rem;
}
.book-detail__review-head {
align-items: flex-start;
gap: 0.7rem;
margin-bottom: 0.45rem;
}
.book-detail__review-name {
display: block;
margin-bottom: 0.15rem;
}
.book-detail__review-rating {
color: color-mix(in srgb, #f6b73c 65%, var(--color-primary));
font-size: 0.88rem;
letter-spacing: 0.06em;
white-space: nowrap;
}
.book-detail__review-text {
font-size: 0.9rem;
line-height: 1.55;
}
.book-detail__review-card--compact .book-detail__review-text {
font-size: 0.88rem;
}
.book-detail__review-date {
margin-top: 0;
}
.book-detail__review-actions {
position: sticky;
top: 0.75rem;
margin-top: 0;
}
.book-detail__review-cta-card {
padding: 1rem;
}
.book-detail__review-cta-kicker {
display: inline-block;
margin-bottom: 0.3rem;
color: var(--color-primary);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.book-detail__review-cta-card h3 {
margin: 0 0 0.45rem;
font-size: 1.02rem;
}
.book-detail__review-cta-card p {
margin: 0 0 0.8rem;
color: var(--color-text-muted);
line-height: 1.55;
}
.book-detail__review-actions .btn {
width: 100%;
}
.book-detail__reviews-empty {
padding: 1rem 0.95rem;
text-align: center;
}
.book-detail__reviews-empty-icon {
width: 46px;
height: 46px;
margin: 0 auto 0.6rem;
border-radius: 50%;
display: grid;
place-items: center;
color: color-mix(in srgb, #f6b73c 65%, var(--color-primary));
font-size: 1.15rem;
background: color-mix(
in srgb,
var(--color-primary) 12%,
var(--color-surface)
);
}
.book-detail__reviews-empty h3 {
margin: 0 0 0.28rem;
font-size: 0.98rem;
}
.book-detail__reviews-empty p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.88rem;
line-height: 1.5;
}
.book-detail__reviews-empty + .text-muted {
display: none;
}
.book-detail__review-image img {
display: block;
width: 100%;
max-width: none;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
border-radius: calc(var(--radius-md) - 1px);
margin-top: 0.55rem;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.book-detail__review-card--featured .book-detail__review-image img {
margin-top: 0.65rem;
}
.book-detail__review-card--featured .book-detail__review-name {
font-size: 0.98rem;
}
.book-detail__review-card--compact .book-detail__review-name {
font-size: 0.92rem;
}
@media (max-width: 991px) {
.book-detail__reviews-head,
.book-detail__reviews-summary {
grid-template-columns: 1fr;
}
.book-detail__reviews-head {
/* flex-direction: column; */
align-items: stretch;
}
.book-detail__review-actions {
position: static;
}
.book-detail__reviews-list {
column-count: 1;
}
}
@media (max-width: 575px) {
.book-detail__rating-overview,
.book-detail__review-head {
flex-direction: column;
}
}
.book-detail__side {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.book-detail__side-empty {
font-size: 0.9rem;
}
.book-detail__side-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.book-detail__side-card {
display: grid;
grid-template-columns: 65px 1fr;
gap: 0.5rem;
align-items: center;
padding: 0.1rem;
border-radius: var(--radius-md);
text-decoration: none;
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
transition:
transform 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease;
}
.book-detail__side-card:hover {
transform: translateY(-2px);
border-color: color-mix(
in srgb,
var(--color-primary) 45%,
var(--color-border)
);
box-shadow: 0 10px 24px
color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.book-detail__side-cover {
/* width: 66px; */
height: 90px;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
background: color-mix(
in srgb,
var(--color-surface) 20%,
var(--color-surface) 20%
);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.book-detail__side-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.book-detail__side-fallback {
width: 36px;
height: 36px;
object-fit: contain;
opacity: 0.6;
}
.book-detail__side-info {
display: grid;
gap: 0.25rem;
}
.book-detail__side-title {
font-weight: 700;
font-size: 0.88rem;
color: var(--color-text);
}
.book-detail__side-author {
font-size: 0.76rem;
color: var(--color-primary);
}
.book-detail__side-price {
font-weight: 700;
font-size: 0.82rem;
color: var(--color-primary);
}
.book-detail__section-title {
font-weight: 800;
font-size: 1rem;
margin-bottom: 0.7rem;
}
.book-detail__description {
color: var(--color-text);
line-height: 1.6;
font-size: 0.9rem;
}
.book-detail__description > :first-child {
margin-top: 0;
}
.book-detail__description > :last-child {
margin-bottom: 0;
}
.book-detail__description p,
.book-detail__description li {
color: var(--color-text);
}
.book-detail__description h1,
.book-detail__description h2,
.book-detail__description h3,
.book-detail__description h4 {
color: var(--color-text);
margin-top: 0.9rem;
margin-bottom: 0.45rem;
line-height: 1.35;
}
.book-detail__description h1 {
font-size: 1.35rem;
}
.book-detail__description h2 {
font-size: 1.2rem;
}
.book-detail__description h3 {
font-size: 1.05rem;
}
.book-detail__description h4 {
font-size: 0.98rem;
}
.book-detail__description ul,
.book-detail__description ol {
margin: 0.55rem 0;
padding-left: 1.2rem;
}
.book-detail__description li + li {
margin-top: 0.2rem;
}
.book-detail__description a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 0.14em;
}
.book-detail__description a:hover {
color: color-mix(in srgb, var(--color-primary) 78%, var(--color-text));
}
.book-detail__description blockquote {
margin: 0.75rem 0;
padding: 0.55rem 0.85rem;
border-left: 3px solid
color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
color: var(--color-text-muted);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.book-detail-empty {
padding: clamp(2rem, 4vw, 3.5rem);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.book-detail-empty__icon {
font-size: 3rem;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
/* Responsive sidebar */
@media (max-width: 991px) {
.books-sidebar {
margin-bottom: var(--space-4);
padding: var(--space-3);
}
}
/* Pagination theme support */
.svp-pagination {
background: none;
border-radius: var(--radius-md);
padding: 0.5rem 0.5rem;
gap: 0.25rem;
}
.svp-pagination .page-item {
margin: 0 0.1rem;
}
.svp-page-link {
color: var(--color-text);
background: var(--color-muted);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
font-weight: 600;
transition: all 180ms ease;
}
.svp-page-link:hover,
.svp-pagination .page-item.active .svp-page-link {
color: var(--color-primary-contrast);
background: var(--color-primary);
border-color: var(--color-primary);
box-shadow: 0 4px 16px
color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.svp-pagination .page-item.disabled .svp-page-link {
color: var(--color-text-muted);
background: var(--color-muted);
border-color: var(--color-border);
cursor: not-allowed;
}
@media (max-width: 575px) {
.svp-pagination {
font-size: 0.95rem;
padding: 0.25rem 0.25rem;
}
}
/* About Page */
.timeline-wrapper {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
/* Center line */
.timeline-wrapper::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #0d6efd, #6610f2, #0d6efd);
transform: translateX(-50%);
}
.timeline-items {
position: relative;
}
.timeline-row {
margin-bottom: 1.5rem;
position: relative;
}
/* Left and Right alternating */
.timeline-row:nth-child(odd) {
margin-right: 52%;
}
.timeline-row:nth-child(even) {
margin-left: 52%;
}
.timeline-content {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.02)
);
border: 1px solid rgba(13, 110, 253, 0.2);
border-radius: 12px;
padding: 1.25rem;
position: relative;
transition: all 0.4s ease;
cursor: pointer;
}
.timeline-content:hover {
border-color: rgba(13, 110, 253, 0.5);
box-shadow: 0 10px 40px rgba(13, 110, 253, 0.15);
transform: translateY(-5px);
}
/* Watermark icon on center line (subtle background) */
.timeline-row::before {
content: attr(data-icon);
position: absolute;
left: 50%;
top: 1.25rem;
transform: translate(-50%, -50%);
font-size: 64px;
line-height: 1;
color: rgba(13, 110, 253, 0.06);
z-index: 1;
pointer-events: none;
}
/* ensure content sits above watermark */
.timeline-content {
z-index: 2;
position: relative;
}
.timeline-year {
font-size: 12px;
font-weight: 700;
color: var(--color-primary);
background: rgba(13, 110, 253, 0.1);
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: 20px;
margin-bottom: 0.3rem;
}
.timeline-content h4 {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin-bottom: 0.3rem;
margin-top: 0;
}
.timeline-content p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.4;
margin-bottom: 0;
}
/* Arrow pointers */
.timeline-row:nth-child(odd) .timeline-content::after {
content: "";
position: absolute;
right: -12px;
top: 1.25rem;
width: 0;
height: 0;
border-left: 12px solid rgba(13, 110, 253, 0.2);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.timeline-row:nth-child(even) .timeline-content::after {
content: "";
position: absolute;
left: -12px;
top: 1.25rem;
width: 0;
height: 0;
border-right: 12px solid rgba(13, 110, 253, 0.2);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.timeline-content:hover::after {
border-left-color: rgba(13, 110, 253, 0.5);
border-right-color: rgba(13, 110, 253, 0.5);
}
/* remove separate icon box; year is inline with title for compactness */
.timeline-year {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--color-primary);
background: rgba(13, 110, 253, 0.08);
padding: 0.2rem 0.5rem;
border-radius: 12px;
margin-right: 0.5rem;
}
/* Mobile responsive */
@media (max-width: 768px) {
.about-section .container {
padding-inline: 0.8rem;
}
.about-section .text-center.mb-3 h2 {
font-size: 1.6rem !important;
line-height: 1.2;
}
.about-section .text-center.mb-3 p {
font-size: 0.88rem !important;
line-height: 1.45;
}
.timeline-wrapper::before {
left: 12px;
width: 2px;
}
.timeline-row:nth-child(odd),
.timeline-row:nth-child(even) {
margin-left: 32px;
margin-right: 0;
margin-bottom: 1rem;
}
.timeline-row::after {
left: 12px;
}
.timeline-row:nth-child(odd) .timeline-content::after,
.timeline-row:nth-child(even) .timeline-content::after {
left: -10px !important;
right: auto !important;
border-style: solid;
border-width: 7px 10px 7px 0;
border-color: transparent rgba(13, 110, 253, 0.2) transparent transparent;
}
.timeline-content {
padding: 0.9rem 0.92rem;
border-radius: 14px;
}
.timeline-content h4 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
font-size: 0.98rem;
line-height: 1.35;
}
.timeline-content p {
font-size: 0.88rem;
line-height: 1.55;
}
.timeline-row::before {
top: 1rem;
font-size: 42px;
opacity: 0.04;
}
.timeline-year {
margin-right: 0;
margin-bottom: 0;
font-size: 11px;
padding: 0.18rem 0.48rem;
}
.timeline-content:hover {
transform: none;
box-shadow: none;
}
.timeline-content:hover::after {
border-color: transparent rgba(13, 110, 253, 0.2) transparent transparent;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.timeline-row {
animation: slideIn 0.6s ease-out backwards;
}
.timeline-row:nth-child(1) {
animation-delay: 0.1s;
}
.timeline-row:nth-child(2) {
animation-delay: 0.2s;
}
.timeline-row:nth-child(3) {
animation-delay: 0.3s;
}
.timeline-row:nth-child(4) {
animation-delay: 0.4s;
}
.contact-compact .form-control {
padding: 0.4rem 0.6rem;
}
.contact-compact .form-label {
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.contact-info .info-item {
display: flex;
gap: 0.6rem;
align-items: center;
margin-bottom: 0.6rem;
}
.contact-info .info-item svg {
width: 18px;
height: 18px;
opacity: 0.9;
}
@media (max-width: 767.98px) {
.contact-info {
margin-bottom: 1rem;
}
}
/* Dark-mode support for form controls (prefers-color-scheme OR theme toggle) */
/* Applies to common form inputs used in Contact section */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-control-sm,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
.dark-mode .form-control,
.dark-mode .form-control-sm,
.dark-mode .form-select,
.dark-mode textarea,
.dark-mode select {
background: #0b1220; /* slightly lighter than page surface for inputs */
color: var(--color-text);
border: 1px solid rgba(230, 238, 248, 0.06);
box-shadow: none;
transition:
background-color 160ms ease,
border-color 160ms ease,
color 160ms ease;
}
[data-theme="dark"] .form-control::placeholder,
.dark-mode .form-control::placeholder,
[data-theme="dark"] textarea::placeholder,
.dark-mode textarea::placeholder {
color: rgba(230, 238, 248, 0.48);
opacity: 1;
}
[data-theme="dark"] .form-control:focus,
.dark-mode .form-control:focus,
[data-theme="dark"] textarea:focus,
.dark-mode textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 6px 18px
color-mix(in srgb, var(--color-primary) 12%, transparent);
outline: none;
}
.site-popup-modal__content {
border: 0;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
}
.site-popup-modal__header {
padding: 1.25rem 1.5rem 1rem;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
background: linear-gradient(
135deg,
rgba(14, 116, 144, 0.08),
rgba(59, 130, 246, 0.14)
);
}
.site-popup-modal__eyebrow {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #0f766e;
font-weight: 700;
}
.site-popup-modal__title {
margin: 0;
font-size: clamp(1.35rem, 2.4vw, 2rem);
font-weight: 700;
color: #0f172a;
}
.site-popup-modal__body {
padding: 1.5rem;
font-size: 1rem;
line-height: 1.8;
color: #334155;
}
.site-popup-modal__body > *:last-child {
margin-bottom: 0;
}
.site-popup-modal__body img {
display: block;
max-width: 100%;
height: auto;
margin: 1rem auto;
border-radius: 18px;
}
.site-popup-modal__body a {
color: #2563eb;
text-decoration: underline;
}
[data-theme="dark"] .site-popup-modal__content {
background: #0f172a;
box-shadow: 0 30px 80px rgba(2, 6, 23, 0.6);
}
[data-theme="dark"] .site-popup-modal__header {
border-bottom-color: rgba(148, 163, 184, 0.16);
background: linear-gradient(
135deg,
rgba(13, 148, 136, 0.18),
rgba(37, 99, 235, 0.22)
);
}
[data-theme="dark"] .site-popup-modal__title,
[data-theme="dark"] .site-popup-modal__body {
color: #e2e8f0;
}
[data-theme="dark"] .site-popup-modal__eyebrow {
color: #5eead4;
}
/* Smaller controls variant (contact-compact) - keep contrast
and slightly darker background to separate from cards */
.contact-compact [type="text"],
.contact-compact [type="email"],
.contact-compact textarea,
.contact-compact select {
background: rgba(255, 255, 255, 0.03);
}
/* Ensure cards in dark mode also show appropriate background for form container */
[data-theme="dark"] .card,
.dark-mode .card {
background: var(--bg-3);
color: var(--color-text);
border-color: rgba(255, 255, 255, 0.04);
}
/* Books Page */
.book-card {
transition:
transform 200ms ease,
box-shadow 200ms ease,
border-color 200ms ease;
cursor: pointer;
border: 1px solid var(--color-border) !important;
overflow: hidden;
}
.book-card__discount-badge {
position: absolute;
top: 0;
right: 0.2rem;
z-index: 2;
display: grid;
place-items: center;
width: 3.55rem;
aspect-ratio: 1;
padding: 0.22rem;
background: linear-gradient(145deg, #f97316, #ea580c);
color: #fff;
font-weight: 800;
box-shadow: 0 8px 18px rgba(234, 88, 12, 0.18);
clip-path: polygon(
50% 5%,
58% 13%,
69% 9%,
74% 20%,
86% 18%,
84% 30%,
95% 37%,
84% 46%,
92% 58%,
80% 61%,
82% 74%,
69% 71%,
64% 84%,
50% 78%,
36% 84%,
31% 71%,
18% 74%,
20% 61%,
8% 58%,
16% 46%,
5% 37%,
16% 30%,
14% 18%,
26% 20%,
31% 9%,
42% 13%
);
text-align: center;
line-height: 1;
justify-items: center;
align-content: center;
padding-top: 0.001rem;
padding-bottom: 0.35rem;
}
.book-card__discount-value {
display: block;
font-size: 0.82rem;
font-weight: 900;
letter-spacing: -0.02em;
transform: translateY(0.06rem);
}
.book-card__discount-label {
display: block;
margin-top: 0.05rem;
font-size: 0.48rem;
font-weight: 800;
letter-spacing: 0.1em;
}
.book-card__price {
display: flex;
align-items: center;
}
.book-card .book-price-stack {
display: inline-flex;
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: 0.4rem 0.65rem;
}
.book-card .book-price-stack__original {
color: var(--color-text-muted);
font-size: 0.85rem;
font-weight: 600;
text-decoration: line-through;
}
.book-card .book-price-stack__current {
color: #ff8a00;
font-size: 1.08rem;
font-weight: 800;
line-height: 1;
}
.book-card .book-price-stack__badge {
display: none;
}
.book-card:hover {
border-color: var(--color-primary) !important;
box-shadow: 0 10px 40px rgba(79, 70, 229, 0.25) !important;
/* transform: translateY(-5px); */
}
.book-card .card-img-top {
border-color: var(--color-border) !important;
margin-bottom: 0px;
}
/* Dark mode support */
[data-theme="dark"] .book-card {
background: var(--color-surface) !important;
}
[data-theme="dark"] .book-card:hover {
border-color: var(--color-primary) !important;
box-shadow: 0 10px 40px
color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}
/* ========================================
Question Archive Page - Enhanced Design
======================================== */
.qa-page {
background: linear-gradient(
135deg,
var(--bg-2) 0%,
var(--bg-1) 50%,
var(--bg-2) 100%
);
min-height: 100vh;
}
.qa-hero {
padding: clamp(0.75rem, 1vw, 1rem) 0 0.75rem;
position: relative;
overflow: hidden;
}
.qa-hero__inner {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr 1fr;
align-items: center;
}
.qa-hero__inner--compact {
grid-template-columns: 1fr;
gap: var(--space-3);
}
.qa-search__card--compact {
padding: 0.9rem 1.2rem;
}
.qa-hero__stats--compact {
margin-top: var(--space-2);
}
.qa-hero__stats--compact .qa-hero__stat-value {
font-size: 1.4rem;
}
.qa-hero__stats--compact .qa-hero__stat-label {
font-size: 0.8rem;
}
.qa-hero__content {
z-index: 2;
}
.qa-hero__badge-small {
display: inline-block;
font-size: 0.9rem;
font-weight: 600;
padding: 0.6rem 1.2rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
margin-bottom: var(--space-3);
letter-spacing: 0.5px;
}
.qa-hero__title {
font-size: clamp(2rem, 4.2vw, 3.2rem);
line-height: 1.25;
margin: 0 0 var(--space-3);
font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.qa-hero__subtitle {
font-size: 1rem;
line-height: 1.5;
color: var(--color-text-muted);
max-width: 40rem;
margin: 0 0 var(--space-4);
}
.qa-hero__stats {
display: flex;
gap: clamp(1.5rem, 2vw, 2.5rem);
flex-wrap: wrap;
margin-top: var(--space-3);
}
.qa-hero__stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.qa-hero__stat-value {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1;
}
.qa-hero__stat-label {
font-size: 0.85rem;
color: var(--color-text-muted);
font-weight: 500;
}
.qa-hero__visual {
position: relative;
height: 300px;
perspective: 1000px;
}
.qa-hero__decoration {
position: absolute;
border-radius: 20px;
opacity: 0.9;
animation: float 6s ease-in-out infinite;
}
.qa-hero__decoration-1 {
width: 120px;
height: 140px;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
top: 20px;
right: 40px;
animation-delay: 0s;
}
.qa-hero__decoration-2 {
width: 100px;
height: 100px;
background: linear-gradient(
135deg,
var(--color-secondary),
var(--color-accent)
);
top: 160px;
right: 10px;
animation-delay: 1s;
}
.qa-hero__decoration-3 {
width: 80px;
height: 90px;
background: linear-gradient(
135deg,
var(--color-accent),
var(--color-primary)
);
top: 140px;
right: 150px;
animation-delay: 2s;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.qa-search-section {
padding: 1rem 0 2.25rem;
}
.qa-search__card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: clamp(0.75rem, 2vw, 1.25rem);
padding: clamp(1.1rem, 2.5vw, 1.8rem);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(10px);
transition: all 300ms ease;
}
.qa-search__card:hover {
border-color: var(--color-primary);
box-shadow: 0 20px 40px
color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.qa-search__header {
margin-bottom: var(--space-3);
}
.qa-search__title {
margin: 0 0 var(--space-1);
font-size: 1.25rem;
font-weight: 700;
}
.qa-search__hint {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.qa-search__form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-2);
align-items: end;
}
.qa-search__form--inline {
display: flex;
flex-wrap: nowrap;
gap: var(--space-2);
align-items: center;
}
.qa-field--inline {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.qa-field--inline .qa-field__label {
margin: 0;
font-size: 0.85rem;
white-space: nowrap;
}
.qa-field--inline .qa-field__control {
min-width: 180px;
padding: 0.55rem 2.2rem 0.55rem 0.8rem;
}
.qa-search__btn--inline {
white-space: nowrap;
padding: 0.6rem 1.4rem;
}
@media (max-width: 992px) {
.qa-search__form--inline {
flex-wrap: wrap;
align-items: stretch;
}
.qa-field--inline {
flex: 1 1 220px;
}
}
.qa-field {
display: grid;
gap: var(--space-1);
}
.qa-field__label {
font-weight: 600;
color: var(--color-text);
font-size: 0.95rem;
display: flex;
align-items: center;
gap: var(--space-1);
}
.qa-field__control {
appearance: none;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.65rem 2.2rem 0.65rem 0.9rem;
background: var(--color-muted);
color: var(--color-text);
font-weight: 500;
font-size: 0.95rem;
cursor: pointer;
transition: all 250ms ease;
position: relative;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 1rem) 55%,
0 0;
background-size:
16px 16px,
100% 100%;
background-repeat: no-repeat;
}
/* Dark theme dropdown icon */
[data-theme="dark"] .qa-field__control,
.dark-mode .qa-field__control {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 1rem) 55%,
0 0;
background-size:
16px 16px,
100% 100%;
background-repeat: no-repeat;
}
[data-theme="dark"] .qa-field__control:hover,
.dark-mode .qa-field__control:hover,
[data-theme="dark"] .qa-field__control:focus,
.dark-mode .qa-field__control:focus {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(to right, transparent, transparent);
}
.qa-field__control:hover {
border-color: var(--color-primary);
background: var(--color-surface);
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 1rem) 55%,
0 0;
background-size:
16px 16px,
100% 100%;
background-repeat: no-repeat;
}
.qa-field__control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px
color-mix(in srgb, var(--color-primary) 20%, transparent);
background: var(--color-surface);
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 1rem) 55%,
0 0;
background-size:
16px 16px,
100% 100%;
background-repeat: no-repeat;
}
.qa-search__btn {
border: 0;
border-radius: 999px;
padding: 0.7rem 1.6rem;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
color: var(--color-primary-contrast);
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 12px 30px
color-mix(in srgb, var(--color-primary) 20%, transparent);
cursor: pointer;
transition: all 300ms ease;
letter-spacing: 0.3px;
}
.qa-search__btn:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px
color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.qa-search__btn:active {
transform: translateY(-1px);
}
.qa-results {
padding: 1rem 0 1rem;
}
.qa-results__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.qa-results__title {
margin: 0 0 var(--space-1);
font-size: 1.6rem;
font-weight: 700;
}
.qa-results__meta {
margin: 0;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.qa-results__note {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.6rem 1.2rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-success) 12%, transparent);
color: var(--color-text);
font-weight: 600;
font-size: 0.9rem;
}
.qa-results__note-text {
color: var(--color-success);
}
.qa-results__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
box-shadow: 0 0 0 4px
color-mix(in srgb, var(--color-success) 20%, transparent);
display: inline-block;
}
/* Filter Tabs */
.qa-filter-tabs {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.qa-filter-tab {
padding: 0.6rem 1.3rem;
border: 1.5px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
color: var(--color-text);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 250ms ease;
}
.qa-filter-tab:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.qa-filter-tab--active {
background: var(--color-primary);
color: var(--color-primary-contrast);
border-color: var(--color-primary);
box-shadow: 0 8px 20px
color-mix(in srgb, var(--color-primary) 20%, transparent);
}
/* Card Grid */
.qa-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-4);
animation: fadeIn 500ms ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.qa-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
}
.qa-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
opacity: 0;
transition: opacity 300ms ease;
}
.qa-card:hover {
border-color: var(--color-primary);
box-shadow: 0 20px 40px
color-mix(in srgb, var(--color-primary) 15%, transparent);
transform: translateY(-8px);
}
.qa-card:hover::before {
opacity: 1;
}
.qa-card__header {
display: flex;
justify-content: space-between;
align-items: start;
gap: var(--space-2);
}
.qa-card__badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
padding: 0.4rem 0.8rem;
border-radius: 6px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.qa-card__badge--primary {
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
}
.qa-card__badge--secondary {
background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
color: var(--color-secondary);
}
.qa-card__badge--accent {
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
color: var(--color-accent);
}
.qa-card__year {
font-size: 0.85rem;
color: var(--color-text-muted);
font-weight: 600;
background: var(--color-muted);
padding: 0.3rem 0.6rem;
border-radius: 4px;
}
.qa-card__title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
color: var(--color-text);
}
.qa-card__description {
margin: 0;
font-size: 0.95rem;
color: var(--color-text-muted);
line-height: 1.5;
flex-grow: 1;
}
.qa-card__meta {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-top: var(--space-2);
/* border-top: 1px solid var(--color-border); */
}
.qa-card__meta-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
}
.qa-card__meta-label {
color: var(--color-text-muted);
font-weight: 500;
}
.qa-card__meta-value {
color: var(--color-text);
font-weight: 600;
background: var(--color-muted);
padding: 0.2rem 0.6rem;
border-radius: 4px;
}
.qa-card__download {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: 0.8rem 1.2rem;
border-radius: var(--radius-md);
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
color: var(--color-primary-contrast);
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
transition: all 250ms ease;
box-shadow: 0 8px 16px
color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.qa-card__download:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px
color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.qa-card__download-arrow {
transition: transform 250ms ease;
display: inline-block;
}
.qa-card__download:hover .qa-card__download-arrow {
transform: translateX(4px);
}
/* Subject grid + results filter */
.qa-subjects {
padding: 1rem 0 1.5rem;
}
.qa-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.qa-section-title {
margin: 0;
font-size: 1.4rem;
font-weight: 700;
}
.qa-section-subtitle {
margin: 0;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.qa-subjects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-3);
}
.qa-subject-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 0.9rem 1rem;
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
color: var(--color-text);
transition: all 250ms ease;
}
.qa-subject-card:hover {
border-color: var(--color-primary);
box-shadow: 0 12px 24px
color-mix(in srgb, var(--color-primary) 12%, transparent);
transform: translateY(-2px);
}
.qa-subject-card--active {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border-color: var(--color-primary);
}
.qa-subject-icon {
font-size: 1.2rem;
}
.qa-subject-name {
font-weight: 600;
font-size: 0.95rem;
}
.qa-results-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 0.8rem 1rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.qa-results-filter__title {
font-weight: 700;
}
.qa-results-filter__form {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.qa-results-empty {
padding: 1rem;
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
@media (max-width: 768px) {
.qa-section-head {
flex-direction: column;
align-items: flex-start;
}
.qa-subjects-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.qa-results-filter {
align-items: stretch;
}
.qa-results-filter__form {
width: 100%;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.qa-hero__inner {
grid-template-columns: 1fr;
}
.qa-hero__visual {
display: none;
}
.qa-hero__title {
font-size: clamp(2rem, 5vw, 3rem);
}
.qa-search__form {
grid-template-columns: 1fr;
}
.qa-search__btn {
width: 100%;
}
.qa-cards-grid {
grid-template-columns: 1fr;
}
.qa-results__header {
flex-direction: column;
align-items: flex-start;
}
.qa-filter-tabs {
overflow-x: auto;
padding-bottom: var(--space-1);
}
.qa-card {
padding: var(--space-3);
}
}
/* ========================================
Contact Page
======================================== */
.contact-page {
background: linear-gradient(
135deg,
var(--bg-2) 0%,
var(--bg-1) 50%,
var(--bg-2) 100%
);
min-height: 100vh;
}
.contact-hero {
padding: clamp(1.35rem, 3vw, 2.25rem) 0 0.9rem;
position: relative;
overflow: hidden;
}
.contact-hero__inner {
display: grid;
gap: 1.25rem;
grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.6fr);
align-items: center;
}
.contact-hero__content {
z-index: 2;
max-width: 46rem;
}
.contact-hero__badge {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
padding: 0.38rem 0.82rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
margin-bottom: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.contact-hero__title {
font-size: clamp(1.8rem, 3.6vw, 2.5rem);
line-height: 1.18;
margin: 0 0 0.55rem;
padding-top: 0.12em;
font-weight: 700;
letter-spacing: -0.03em;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
overflow: visible;
}
.contact-hero__subtitle {
font-size: 0.95rem;
line-height: 1.55;
color: var(--color-text-muted);
margin: 0;
}
.contact-hero__visual {
position: relative;
height: 180px;
perspective: 1000px;
}
.contact-hero__decoration {
position: absolute;
border-radius: 20px;
opacity: 0.9;
animation: float 6s ease-in-out infinite;
}
.contact-hero__decoration-1 {
width: 88px;
height: 100px;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
top: 14px;
right: 30px;
animation-delay: 0s;
}
.contact-hero__decoration-2 {
width: 74px;
height: 74px;
background: linear-gradient(
135deg,
var(--color-secondary),
var(--color-accent)
);
top: 96px;
right: 4px;
animation-delay: 1s;
}
.contact-content {
padding: 0.5rem 0 4rem;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
align-items: start;
}
.contact-info-section {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.contact-info-title {
font-size: 1.6rem;
font-weight: 700;
margin: 0;
color: var(--color-text);
}
.contact-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
.contact-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-3);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
gap: var(--space-2);
align-items: flex-start;
overflow: hidden;
}
.contact-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
opacity: 0;
transition: opacity 300ms ease;
}
.contact-card:hover {
border-color: var(--color-primary);
box-shadow: 0 20px 40px
color-mix(in srgb, var(--color-primary) 15%, transparent);
transform: translateY(-4px);
}
.contact-card:hover::before {
opacity: 1;
}
.contact-card__icon {
width: 56px;
height: 56px;
border-radius: 12px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
flex-shrink: 0;
}
.contact-card__content {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1;
}
.contact-card__title {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
color: var(--color-text);
}
.contact-card__info {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.contact-card__detail {
font-size: 0.95rem;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
padding: 0;
}
.contact-card__link {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
transition: all 250ms ease;
}
.contact-card__link:hover {
color: var(--color-secondary);
text-decoration: underline;
}
.contact-form-section {
display: flex;
flex-direction: column;
}
.contact-form-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 3vw, 2.5rem);
box-shadow: var(--shadow-soft);
}
.contact-form-header {
margin-bottom: var(--space-4);
}
.contact-form-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 var(--space-2);
color: var(--color-text);
}
.contact-form-subtitle {
font-size: 0.95rem;
color: var(--color-text-muted);
margin: 0;
}
.contact-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.contact-form__status {
margin-bottom: 1rem;
padding: 0.8rem 0.95rem;
border-radius: var(--radius-md);
border: 1px solid transparent;
font-size: 0.94rem;
line-height: 1.5;
}
.contact-form__status--success {
color: #166534;
background: #ecfdf3;
border-color: #a7f3d0;
}
.contact-form__status--error {
color: #991b1b;
background: #fef2f2;
border-color: #fecaca;
}
.contact-form__group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.contact-form__error {
min-height: 1.1rem;
font-size: 0.82rem;
color: #b91c1c;
}
.contact-form__honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-form__label {
font-weight: 600;
color: var(--color-text);
font-size: 0.95rem;
}
.contact-form__char-count {
font-weight: 400;
color: var(--color-text-muted);
font-size: 0.85rem;
}
.contact-form__input {
appearance: none;
}
.contact-form__input,
.contact-form__textarea {
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.8rem 1rem;
background: var(--color-muted);
color: var(--color-text);
font-family: inherit;
font-weight: 500;
font-size: 0.95rem;
transition: all 250ms ease;
}
.contact-form__textarea {
resize: vertical;
font-family: var(--font-ui);
}
.contact-form__char-info {
font-size: 0.85rem;
color: var(--color-text-muted);
text-align: right;
}
.contact-form__char-used {
font-weight: 600;
color: var(--color-primary);
}
.contact-form__submit {
border: 0;
border-radius: 999px;
padding: 0.85rem 2rem;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
color: var(--color-primary-contrast);
font-weight: 700;
font-size: 0.95rem;
box-shadow: 0 12px 30px
color-mix(in srgb, var(--color-primary) 20%, transparent);
cursor: pointer;
transition: all 300ms ease;
letter-spacing: 0.3px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.contact-form__submit:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px
color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.contact-form__submit:active {
transform: translateY(-1px);
}
.contact-form__submit-arrow {
transition: transform 250ms ease;
display: inline-block;
}
.contact-form__submit:hover .contact-form__submit-arrow {
transform: translateX(4px);
}
.contact-form__note {
font-size: 0.85rem;
color: var(--color-text-muted);
text-align: center;
margin: 0;
}
@media (max-width: 768px) {
.contact-hero__inner {
grid-template-columns: 1fr;
}
.contact-hero__visual {
display: none;
}
.contact-hero__title {
font-size: clamp(1.55rem, 6vw, 2rem);
}
.contact-grid {
grid-template-columns: 1fr;
}
.contact-cards {
grid-template-columns: 1fr;
}
}
/* Success Message */
.contact-success-message {
position: fixed;
top: var(--space-4);
right: var(--space-4);
z-index: 9999;
animation: slideIn 400ms ease forwards;
}
.contact-success-content {
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--color-success);
color: var(--color-success-contrast);
padding: 1rem 1.5rem;
border-radius: var(--radius-lg);
box-shadow: 0 12px 30px
color-mix(in srgb, var(--color-success) 30%, transparent);
font-weight: 600;
font-size: 0.95rem;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(400px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (max-width: 768px) {
.contact-success-message {
left: var(--space-4);
right: var(--space-4);
}
.contact-success-content {
font-size: 0.9rem;
padding: 0.8rem 1.2rem;
}
}
/* ========================================
Library Page
======================================== */
.library-page {
background: linear-gradient(
135deg,
var(--bg-2) 0%,
var(--bg-1) 50%,
var(--bg-2) 100%
);
min-height: 100vh;
}
.library-hero {
padding: clamp(1.4rem, 3vw, 2.4rem) 0 0.9rem;
position: relative;
}
.library-hero__inner {
display: block;
}
.library-hero__content {
z-index: 2;
max-width: 52rem;
}
.library-hero__badge {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
padding: 0.38rem 0.82rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
margin-bottom: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.library-hero__title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
line-height: 1.18;
margin: 0 0 0.45rem;
padding-top: 0.12em;
font-weight: 700;
letter-spacing: -0.03em;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
overflow: visible;
}
.library-hero__subtitle {
font-size: 0.95rem;
line-height: 1.55;
color: var(--color-text-muted);
margin: 0;
}
.library-hero__visual {
position: relative;
height: 300px;
perspective: 1000px;
}
.library-hero__decoration {
position: absolute;
border-radius: 20px;
opacity: 0.9;
animation: float 6s ease-in-out infinite;
}
.library-hero__decoration-1 {
width: 120px;
height: 140px;
background: linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);
top: 20px;
right: 40px;
animation-delay: 0s;
}
.library-hero__decoration-2 {
width: 100px;
height: 100px;
background: linear-gradient(
135deg,
var(--color-secondary),
var(--color-accent)
);
top: 160px;
right: 10px;
animation-delay: 1s;
}
.library-content {
padding: 1rem 0 4rem;
}
.library-search {
margin-bottom: 1.6rem;
}
.library-search__card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 1rem;
padding: 0.95rem 1.15rem;
box-shadow: var(--shadow-soft);
transition:
border-color 220ms ease,
box-shadow 220ms ease;
}
.library-search__card:hover {
border-color: var(--color-primary);
box-shadow: 0 20px 40px
color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.library-search__header {
margin-bottom: 0;
}
.library-search__title {
margin: 0 0 0.15rem;
font-size: 1.05rem;
font-weight: 700;
}
.library-search__hint {
margin: 0;
color: var(--color-text-muted);
font-size: 0.84rem;
}
.library-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: nowrap;
}
.library-filter__control {
display: flex;
align-items: center;
gap: 0.7rem;
flex: 0 1 420px;
min-width: 0;
}
.library-filter__label {
font-weight: 600;
color: var(--color-text);
font-size: 0.9rem;
margin: 0;
white-space: nowrap;
}
.library-filter__select {
appearance: none;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.7rem 1rem;
background: var(--color-muted)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234f46e5' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E")
no-repeat;
background-position: right 0.75rem center;
padding-right: 2.5rem;
color: var(--color-text);
font-weight: 500;
font-size: 0.92rem;
cursor: pointer;
transition: all 250ms ease;
width: 100%;
}
.library-filter__select:hover {
border-color: var(--color-primary);
background-color: var(--color-surface);
}
.library-filter__select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px
color-mix(in srgb, var(--color-primary) 20%, transparent);
background-color: var(--color-surface);
}
.library-results {
margin-top: 0;
}
.library-results__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.library-results__title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
}
.library-filter__meta,
.library-results__meta {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
white-space: nowrap;
}
.library-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: var(--space-4);
animation: fadeIn 500ms ease;
}
.library-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
}
.library-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--color-primary),
var(--color-secondary)
);
opacity: 0;
transition: opacity 300ms ease;
}
.library-card:hover {
border-color: var(--color-primary);
box-shadow: 0 20px 40px
color-mix(in srgb, var(--color-primary) 15%, transparent);
transform: translateY(-8px);
}
.library-card:hover::before {
opacity: 1;
}
.library-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-2);
}
.library-card__title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
flex: 1;
}
.library-card__badge {
display: inline-flex;
font-size: 0.75rem;
font-weight: 700;
padding: 0.4rem 0.8rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
color: var(--color-accent);
white-space: nowrap;
text-transform: capitalize;
letter-spacing: 0.5px;
}
.library-card__content {
display: flex;
flex-direction: column;
gap: var(--space-4);
flex-grow: 1;
}
.library-card__info-group {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.library-card__info-item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.library-card__icon {
width: 20px;
height: 20px;
color: var(--color-primary);
flex-shrink: 0;
margin-top: 0.2rem;
}
.library-card__info-text {
font-size: 0.95rem;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
}
.library-card__link {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
transition: all 250ms ease;
}
.library-card__link:hover {
color: var(--color-secondary);
text-decoration: underline;
}
/* Removed unused library-card stats and action button styles (no longer in markup) */
@media (max-width: 768px) {
.library-hero__title {
font-size: clamp(1.55rem, 6vw, 2rem);
}
.library-cards-grid {
grid-template-columns: 1fr;
}
.library-filter {
flex-wrap: wrap;
align-items: stretch;
}
.library-search__header,
.library-filter__control,
.library-filter__meta {
width: 100%;
}
.library-filter__control {
max-width: 100%;
flex-wrap: wrap;
gap: 0.45rem;
}
.library-results__header {
flex-direction: column;
align-items: flex-start;
}
}
/* Writers toolbar + list view */
.writers-toolbar {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
.writers-search {
max-width: 720px;
width: 100%;
flex: 1 1 420px;
}
.writers-search .input-group-text {
color: var(--color-primary);
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
border-color: color-mix(
in srgb,
var(--color-primary) 22%,
var(--color-border)
);
font-weight: 700;
}
.writers-search .form-control {
color: var(--color-text);
background: var(--color-surface);
border-color: color-mix(
in srgb,
var(--color-primary) 18%,
var(--color-border)
);
}
.writers-search .form-control::placeholder {
color: var(--color-text-muted);
}
.writers-search .form-control:focus {
border-color: color-mix(in srgb, var(--color-primary) 36%, transparent);
box-shadow: 0 0 0 0.2rem
color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.writers-view-toggle {
flex: 0 0 auto;
white-space: nowrap;
}
.writers-grid.writers-list .writer-item {
flex: 0 0 100%;
max-width: 100%;
}
.writers-grid.writers-list .featured-author-card-v2 {
display: flex;
flex-direction: row;
align-items: stretch;
border-radius: 16px;
}
.writers-grid.writers-list .author-card-header-v2 {
flex: 0 0 220px;
height: auto;
padding: 0;
border-radius: 16px 0 0 16px;
aspect-ratio: 1 / 1;
}
.writers-grid.writers-list .author-photo-wrapper-v2 {
width: 100%;
height: 100%;
}
.writers-grid.writers-list .author-photo-v2 {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px 0 0 16px;
border: 0;
box-shadow: none;
}
/* Book tags */
.book-tags-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.book-tags-wrap::before,
.book-tags-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 36px;
z-index: 0;
pointer-events: none;
}
.book-tags-wrap::before {
left: 0;
background: linear-gradient(90deg, var(--color-surface), transparent);
}
.book-tags-wrap::after {
right: 0;
background: linear-gradient(270deg, var(--color-surface), transparent);
}
.book-tags {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.25rem;
padding-left: 2rem;
padding-right: 2rem;
width: 100%;
max-width: 100%;
scrollbar-width: none; /* Firefox */
}
.book-tags::-webkit-scrollbar {
height: 0;
}
.book-tags::-webkit-scrollbar-thumb {
background: transparent;
}
.book-tag {
display: inline-block;
padding-top: 0.25rem;
padding-bottom: 0.1rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
white-space: nowrap;
}
.book-tags-btn {
position: absolute;
top: 0.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
background: var(--color-surface);
color: var(--color-primary);
padding: 0;
z-index: 2;
}
.book-tags-btn-left {
left: 0;
}
.book-tags-btn-right {
right: 0;
}
.book-tags-btn svg {
stroke: currentColor;
}
[data-theme="dark"] .book-tags-btn {
color: #fff;
border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.book-tags-btn:disabled {
opacity: 0.4;
}
.writers-grid.writers-list .card-body {
text-align: left;
padding: 1.25rem 1.5rem;
}
.writers-grid.writers-list .author-name-v2 {
font-size: 1.25rem;
}
.writers-grid.writers-list .author-bio-v2 {
font-size: 0.95rem;
line-height: 1.5;
}
.writers-grid.writers-list .social-links-v2 {
margin-top: auto;
}
.writers-grid.writers-list .writer-item {
padding: 0.25rem 0.5rem;
}
.writers-grid {
--bs-gutter-x: 1rem;
--bs-gutter-y: 1rem;
}
.writers-page > .container > h1 {
font-size: clamp(1.8rem, 4.5vw, 3rem);
line-height: 1.08;
margin-bottom: 0.6rem !important;
}
.writers-page > .container > p.lead {
font-size: 1rem;
line-height: 1.45;
margin-bottom: 1.15rem !important;
}
.books-page > .container > .books-page__subtitle {
font-size: 1.02rem;
line-height: 1.45;
max-width: 42rem;
}
.writer-item .featured-author-card-v2 {
border-radius: 18px;
}
.writer-item .card-body {
padding: 1rem 1rem 1.05rem;
}
.writer-item .author-card-header-v2 {
height: 170px;
}
.writer-item .author-photo-wrapper-v2 {
padding: 0.85rem 0.85rem 0.2rem;
}
.author-photo-fallback-v2 {
width: 100%;
height: 100%;
min-height: 170px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.22rem;
/* border-radius: 18px 18px 0 0;
background:
radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 45%),
linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)));
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); */
color: var(--color-primary);
text-align: center;
}
.author-photo-fallback-v2__logo {
width: 58%;
max-width: 120px;
height: auto;
object-fit: contain;
filter: grayscale(1) brightness(0.9) contrast(0.95);
opacity: 0.82;
}
.author-photo-fallback-v2__label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 68%, var(--color-primary));
opacity: 0.72;
}
.writer-item .author-bio-v2 {
margin-bottom: 0.9rem !important;
line-height: 1.5;
}
.writer-profile-hero__grid {
display: grid;
grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
align-items: stretch;
}
.writer-profile-shell {
margin-bottom: 1.5rem;
}
.writer-profile-hero {
border-radius: 26px;
}
.writer-profile-hero__media {
/* background: var(--bg-6); */
padding: 1.35rem;
position: relative;
}
.writer-profile-hero__image {
width: 100%;
height: 100%;
min-height: 300px;
max-height: 340px;
object-fit: cover;
border-radius: 24px;
display: block;
/* box-shadow: 0 22px 42px rgba(15, 23, 42, 0.18); */
}
.writer-profile-hero__image--fallback {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
background: var(--bg-6);
border: 1px solid
color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}
.writer-profile-hero__fallback-logo {
width: 42%;
max-width: 180px;
height: auto;
object-fit: contain;
filter: grayscale(1) brightness(0.92) contrast(0.95);
opacity: 0.82;
}
.writer-profile-hero__fallback-label {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 68%, var(--color-primary));
opacity: 0.72;
}
.writer-profile-hero__content {
padding: 1.75rem;
}
.writer-profile-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
align-items: center;
}
.writer-profile-hero__title {
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.12;
}
.writer-profile-hero__subtitle {
color: var(--color-text-muted);
font-size: 1rem;
}
.writer-profile-hero__headline {
color: var(--color-text);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.5;
}
.writer-profile-hero__focus {
color: var(--color-primary);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.writer-profile-hero__lead {
color: var(--color-text);
line-height: 1.78;
font-size: 1rem;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 6;
line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.writer-profile-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.writer-profile-hero__chip {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.85rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
font-size: 0.88rem;
font-weight: 700;
}
.writer-profile-hero__chip--accent {
background: color-mix(in srgb, var(--color-warning) 14%, transparent);
color: color-mix(in srgb, var(--color-warning) 72%, var(--color-text));
border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);
}
.writer-profile-section {
border-radius: 22px;
}
.writer-profile-section .card-body {
padding: 1.4rem 1.45rem;
}
.writer-profile-section__eyebrow {
color: var(--color-primary);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.writer-profile-section__body {
color: var(--color-text);
line-height: 1.78;
overflow-wrap: anywhere;
}
.writer-profile-social {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid
color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
}
.writer-profile-social__list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.writer-profile-social__item {
display: inline-flex;
align-items: center;
gap: 0.7rem;
min-height: 48px;
padding: 0.7rem 0.95rem;
border-radius: 16px;
text-decoration: none;
color: var(--color-text);
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
border: 1px solid
color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
transition:
transform 0.18s ease,
border-color 0.18s ease,
background 0.18s ease;
}
.writer-profile-social__item:hover {
transform: translateY(-1px);
color: var(--color-primary);
border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
}
.writer-profile-social__icon {
width: 34px;
height: 34px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
flex: 0 0 auto;
}
.writer-profile-social__label {
font-size: 0.92rem;
font-weight: 700;
line-height: 1;
}
.writer-profile-share-btn {
display: inline-flex;
align-items: center;
}
.writer-profile-share-btn--floating {
position: absolute;
top: 1.7rem;
right: 1.7rem;
z-index: 2;
background: color-mix(in srgb, var(--color-surface) 88%, transparent);
backdrop-filter: blur(8px);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.writer-profile-table {
display: grid;
gap: 0.7rem;
}
.writer-profile-table__row {
display: grid;
grid-template-columns: minmax(110px, 132px) minmax(0, 1fr);
gap: 0.9rem;
padding: 0.78rem 0.9rem;
border-radius: 16px;
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
border: 1px solid
color-mix(in srgb, var(--color-primary) 10%, var(--color-border));
}
.writer-profile-table__label {
color: var(--color-text-muted);
font-size: 0.86rem;
font-weight: 700;
}
.writer-profile-table__value {
color: var(--color-text);
font-weight: 600;
overflow-wrap: anywhere;
}
.writer-profile-tags {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
}
.writer-profile-tag {
display: inline-flex;
align-items: center;
padding: 0.55rem 0.9rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
font-weight: 700;
font-size: 0.88rem;
}
.writer-profile-tag--muted {
background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
color: var(--color-text);
border-color: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
}
.writer-profile-pillset {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
}
.writer-profile-pill {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0.55rem 0.9rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
font-size: 0.88rem;
font-weight: 700;
line-height: 1.35;
}
.writer-profile-pill--muted {
background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
color: var(--color-text);
border-color: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
}
.writer-profile-book-card {
display: block;
height: 100%;
}
.writer-profile-book-card .card {
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
border-radius: 18px;
overflow: hidden;
}
.writer-profile-book-card:hover .card {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
}
.writer-profile-book-card__media {
padding: 1rem 1rem 0;
}
.writer-profile-book-card__image {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 16px;
display: block;
}
@media (max-width: 768px) {
.writers-page {
padding-top: 2.25rem !important;
padding-bottom: 2rem !important;
}
.writers-page > .container > h1 {
font-size: 1.55rem;
line-height: 1.12;
margin-bottom: 0.45rem !important;
}
.writers-page > .container > p.lead {
font-size: 0.88rem;
line-height: 1.32;
margin-bottom: 0.9rem !important;
}
.books-page > .container > .books-page__subtitle {
font-size: 0.88rem;
line-height: 1.32;
margin-bottom: 0.9rem !important;
}
.books-mobile-filter-btn {
font-size: 0.92rem;
padding: 0.7rem 0.95rem;
}
.books-filter-sheet__panel {
padding: 0.95rem 0.95rem 1.1rem;
border-radius: 22px 22px 0 0;
}
.books-filter-sheet__title {
font-size: 1.05rem;
}
.books-filter-sheet__btn {
padding: 0.76rem 0.95rem;
font-size: 0.92rem;
}
.writers-toolbar {
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
}
.writers-search {
flex: 1 1 auto;
max-width: 100%;
}
.writers-search .input-group-text {
padding-inline: 0.8rem;
font-size: 0.85rem;
}
.writers-search .form-control {
min-height: 44px;
font-size: 0.95rem;
}
.writers-view-toggle {
width: 100%;
display: flex;
}
.writers-view-toggle .btn {
flex: 1 1 50%;
justify-content: center;
font-size: 0.84rem;
padding-inline: 0.8rem;
}
.writer-item {
padding-left: 0;
padding-right: 0;
}
.writer-item .featured-author-card-v2 {
border-radius: 16px;
}
.writer-item .author-card-header-v2 {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.writer-item .author-photo-wrapper-v2 {
padding: 0;
}
.writer-item .author-photo-v2 {
width: 100%;
height: 100%;
border-width: 0;
border-radius: 16px 16px 0 0;
object-fit: cover;
}
.writer-item .author-photo-fallback-v2 {
min-height: 150px;
border-radius: 16px 16px 0 0;
}
.writer-item .author-photo-fallback-v2__logo {
width: 52%;
max-width: 92px;
}
.writer-item .author-photo-fallback-v2__label {
font-size: 0.64rem;
}
.writer-item .card-body {
padding: 0.9rem 0.85rem 0.95rem;
}
.writer-item .author-name-v2 {
font-size: 1rem !important;
}
.writer-item .author-bio-v2 {
font-size: 0.84rem !important;
line-height: 1.46;
-webkit-line-clamp: 3;
line-clamp: 3;
margin-bottom: 0.7rem !important;
}
.writer-item .card-body .small.text-muted {
font-size: 0.7rem;
line-height: 1.25;
margin-bottom: 0.22rem !important;
}
.writer-item .card-body > div.mb-2 {
margin-bottom: 0.28rem !important;
}
.writer-item .social-links-v2 {
gap: 0.4rem;
justify-content: center;
margin-bottom: 0.7rem !important;
}
.writer-item .social-icon-v2 {
width: 30px;
height: 30px;
font-size: 0.78rem;
}
.writer-item .btn.btn-primary.btn-sm {
width: 100%;
justify-content: center;
font-size: 0.84rem !important;
padding: 0.55rem 0.75rem;
}
.writer-item .btn.btn-primary.btn-sm svg {
width: 12px;
height: 12px;
}
.writers-grid.writers-list .featured-author-card-v2 {
flex-direction: column;
}
.writers-grid.writers-list .author-card-header-v2 {
flex: 0 0 auto;
border-radius: 16px 16px 0 0;
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
.writers-grid.writers-list .author-photo-wrapper-v2 {
padding: 0;
}
.writers-grid.writers-list .author-photo-v2 {
width: 100%;
height: 100%;
border-radius: 16px 16px 0 0;
border-width: 0;
}
.writers-grid.writers-list .author-photo-fallback-v2 {
min-height: 150px;
border-radius: 16px 16px 0 0;
}
.writers-grid.writers-list .author-photo-fallback-v2__logo {
width: 52%;
max-width: 92px;
}
.writers-grid.writers-list .author-photo-fallback-v2__label {
font-size: 0.64rem;
}
.writers-grid.writers-list .card-body {
padding: 0.8rem 0.8rem 0.85rem;
}
.writers-grid.writers-list .social-links-v2 {
justify-content: flex-start;
}
.writer-profile-hero__grid {
grid-template-columns: 1fr;
}
.writer-profile-hero__image {
min-height: 220px;
max-height: 260px;
}
.writer-profile-hero__image--fallback {
min-height: 220px;
}
.writer-profile-hero__media {
padding: 0.8rem;
}
.writer-profile-share-btn--floating {
top: 1rem;
right: 1rem;
padding: 0.45rem 0.7rem;
font-size: 0.8rem;
}
.writer-profile-hero__fallback-logo {
width: 34%;
max-width: 120px;
}
.writer-profile-hero__fallback-label {
font-size: 0.72rem;
}
.writer-profile-hero__content {
padding: 0 1.15rem 1rem 1.15rem;
}
.writer-profile-table__row {
grid-template-columns: 1fr;
gap: 0.35rem;
}
.writer-profile-social__item {
width: 100%;
justify-content: flex-start;
}
}
/* QA ajax/back */
.qa-results__head-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.qa-results__back {
border: 1px solid var(--color-border);
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-text);
padding: 6px 12px 2px 12px;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
}
.qa-results__back:hover {
background: color-mix(
in srgb,
var(--color-primary) 18%,
var(--color-surface)
);
}
.qa-results--loading {
opacity: 0.6;
pointer-events: none;
}
/* QA hero title row */
.qa-hero__title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
/* QA empty state */
.qa-empty-state {
text-align: center;
padding: 28px 16px;
border: 1px dashed var(--color-border);
border-radius: 16px;
background: var(--color-muted);
}
.qa-empty-state__icon {
font-size: 80px;
opacity: 0.3;
margin-bottom: 8px;
}
.qa-empty-state__title {
font-weight: 700;
margin-bottom: 6px;
}
.qa-empty-state__text {
color: var(--color-text);
opacity: 0.75;
margin-bottom: 14px;
}
.qa-empty-state__cta {
border: 1px solid var(--color-border);
background: color-mix(
in srgb,
var(--color-primary) 12%,
var(--color-surface)
);
color: var(--color-text);
padding: 8px 14px 4px 14px;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
}
.qa-empty-state__cta:hover {
background: color-mix(
in srgb,
var(--color-primary) 20%,
var(--color-surface)
);
}
/* QA results search */
.qa-results-search {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0 8px;
}
.qa-results-search__label {
font-weight: 600;
}
.qa-results-search__input {
flex: 1;
min-width: 180px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
border-radius: 10px;
padding: 8px 10px;
}
.qa-search-empty {
text-align: center;
padding: 12px;
opacity: 0.8;
}
/* QA card year highlight */
.qa-card__year-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(
in srgb,
var(--color-primary) 14%,
var(--color-surface)
);
color: var(--color-text);
font-weight: 700;
font-size: 0.85rem;
margin-right: 8px;
white-space: nowrap;
}
.qa-card__description {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.qa-card--link {
display: block;
text-decoration: none;
color: inherit;
background: linear-gradient(
135deg,
color-mix(in srgb, #93c5fd 22%, var(--color-surface)) 0%,
var(--color-surface) 60%
);
transition:
background 200ms ease,
transform 200ms ease,
box-shadow 200ms ease;
position: relative;
}
.qa-card--link:hover {
border-color: var(--color-border);
transform: none;
}
.qa-card--link:hover::before {
opacity: 0;
}
.qa-card__badge-new {
position: absolute;
top: 10px;
right: 10px;
padding: 4px 8px;
border-radius: 999px;
background: color-mix(
in srgb,
var(--color-primary) 20%,
var(--color-surface)
);
color: var(--color-text);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.qa-card--link:hover {
background: linear-gradient(
135deg,
color-mix(in srgb, #60a5fa 22%, var(--color-surface)) 0%,
var(--color-surface) 60%
);
box-shadow:
0 0 0 1px color-mix(in srgb, #60a5fa 45%, transparent),
0 8px 18px color-mix(in srgb, #60a5fa 30%, transparent);
}
.qa-card__download-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 10px;
padding: 8px 12px;
border-radius: 10px;
background: color-mix(
in srgb,
var(--color-primary) 55%,
var(--color-surface)
);
color: var(--color-text);
font-weight: 600;
font-size: 0.9rem;
width: 100%;
transition:
background 200ms ease,
transform 200ms ease;
}
.qa-card__download-icon {
display: inline-flex;
transition: transform 200ms ease;
}
.qa-card--link:hover .qa-card__download-btn {
background: color-mix(
in srgb,
var(--color-primary) 80%,
var(--color-surface)
);
transform: translateY(-1px);
}
.qa-card--link:hover .qa-card__download-icon {
transform: translateY(2px);
}
/* QA skeleton */
.qa-skeleton__line {
height: 12px;
border-radius: 999px;
background: linear-gradient(
90deg,
var(--color-border),
var(--color-muted),
var(--color-border)
);
background-size: 200% 100%;
animation: qaShimmer 1.2s infinite;
}
.qa-skeleton__line--title {
width: 240px;
height: 16px;
margin-bottom: 8px;
}
.qa-skeleton__line--meta {
width: 160px;
margin-bottom: 18px;
}
.qa-skeleton__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.qa-skeleton__card {
height: 150px;
border-radius: 12px;
background: linear-gradient(
90deg,
var(--color-border),
var(--color-muted),
var(--color-border)
);
background-size: 200% 100%;
animation: qaShimmer 1.2s infinite;
}
@keyframes qaShimmer {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
/* QA show/hide */
.is-hidden {
display: none !important;
}
/* Blog details interactions */
.blog-detail__actions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.85rem;
align-items: center;
}
.blog-detail__engagement {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.blog-detail__like-btn.is-active {
background: color-mix(in srgb, #dc3545 12%, var(--color-surface));
border-color: color-mix(in srgb, #dc3545 42%, var(--color-border));
color: #dc3545;
}
.blog-detail__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
padding: 0 0.35rem;
margin-left: 0.2rem;
border-radius: 999px;
background: color-mix(
in srgb,
var(--color-primary) 12%,
var(--color-surface)
);
font-size: 0.82rem;
font-weight: 700;
}
.blog-meta-text {
font-size: 14px;
}
/* শুধুমাত্র মোবাইল স্ক্রিনের (576px এর নিচে) জন্য ফন্ট সাইজ ছোট করা হলো */
@media (max-width: 576px) {
.blog-meta-text {
font-size: 14px; /* আপনার প্রয়োজন অনুযায়ী 11px বা 13px করতে পারেন */
}
}
.blog-detail__comments .card {
border-radius: 1rem;
}
.blog-detail__comment-list {
display: grid;
gap: 0.9rem;
}
.blog-detail__comment-item {
padding: 1rem 1.05rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.blog-detail__comment-head {
display: flex;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.45rem;
font-size: 0.9rem;
}
.blog-detail__comment-head span {
color: var(--color-text-muted);
white-space: nowrap;
}
.blog-detail__field-error {
min-height: 1rem;
color: #b91c1c;
font-size: 0.82rem;
}
.blog-detail__comment-empty {
padding: 1rem 0;
}
.blog-detail__post-share {
display: flex;
justify-content: flex-start;
}
.blog-detail__sidebar {
position: sticky;
top: 88px;
}
.blog-detail__sidebar-card {
border-radius: 1rem;
}
.blog-detail__author-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.95rem;
}
.blog-detail__author-avatar {
width: 84px;
height: 84px;
border-radius: 999px;
overflow: hidden;
display: grid;
place-items: center;
background: color-mix(
in srgb,
var(--color-primary) 12%,
var(--color-surface)
);
color: var(--color-primary);
font-weight: 800;
font-size: 1.1rem;
}
.blog-detail__author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-detail__author-copy {
min-width: 0;
width: 100%;
}
.blog-detail__author-bio {
color: var(--color-text);
line-height: 1.7;
}
.blog-detail__author-stat {
color: var(--color-text-muted);
font-size: 0.88rem;
font-weight: 600;
}
.blog-detail__author-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
margin-top: 1rem;
}
.blog-detail__author-metric {
display: grid;
gap: 0.12rem;
padding: 0.7rem 0.45rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
text-align: center;
}
.blog-detail__author-metric strong {
font-size: 1rem;
color: var(--color-text);
}
.blog-detail__author-metric span {
color: var(--color-text-muted);
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-detail__related-list {
display: grid;
gap: 0.9rem;
}
.blog-detail__related-item {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: 0.9rem;
align-items: center;
padding: 0.75rem;
border-radius: 0.95rem;
text-decoration: none;
color: inherit;
border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
transition:
transform 220ms ease,
box-shadow 220ms ease,
border-color 220ms ease;
}
.blog-detail__related-item:hover {
transform: translateY(-2px);
border-color: color-mix(
in srgb,
var(--color-primary) 24%,
var(--color-border)
);
box-shadow: 0 12px 24px
color-mix(in srgb, var(--color-primary) 10%, transparent);
color: inherit;
}
.blog-detail__related-thumb {
width: 84px;
height: 74px;
border-radius: 0.8rem;
overflow: hidden;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
display: grid;
place-items: center;
color: var(--color-primary);
font-weight: 700;
}
.blog-detail__related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-detail__related-date {
margin-bottom: 0.2rem;
font-size: 0.76rem;
color: var(--color-text-muted);
}
.blog-detail__related-content h3 {
margin: 0;
font-size: 0.97rem;
line-height: 1.4;
}
@media (max-width: 768px) {
.blog-detail__actions {
align-items: stretch;
}
.blog-detail__engagement {
width: 100%;
}
.blog-detail__engagement .btn {
flex: 1 1 0;
}
.blog-detail__comment-head {
flex-direction: column;
}
.blog-detail__sidebar {
position: static;
}
}
/* Auth pages */
.auth-page {
min-height: calc(100vh - 180px);
display: flex;
align-items: center;
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 8%, transparent),
transparent 34%
),
radial-gradient(
circle at right center,
color-mix(in srgb, var(--color-secondary) 8%, transparent),
transparent 28%
),
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 4%, var(--color-bg)),
var(--color-bg)
);
}
.auth-card {
width: min(100%, 540px);
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
border-radius: 1.4rem;
background: color-mix(in srgb, var(--color-surface) 96%, white);
box-shadow:
0 24px 56px color-mix(in srgb, var(--color-primary) 8%, transparent),
0 1px 0 color-mix(in srgb, white 50%, transparent) inset;
overflow: hidden;
}
.auth-card--wide {
width: min(100%, 880px);
}
.auth-card__grid {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
align-items: stretch;
}
.auth-card__body {
padding: clamp(1.8rem, 3.2vw, 2.5rem);
position: relative;
background: color-mix(in srgb, var(--color-surface) 98%, white);
}
.auth-side {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.6rem;
min-height: 100%;
padding: clamp(1.8rem, 3vw, 2.35rem);
color: var(--color-text);
overflow: hidden;
background: var(--color-bg);
/* border-right: 1px solid rgba(255, 255, 255, 0.08); */
}
.auth-side__art {
position: relative;
z-index: 1;
margin-top: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
width: min(100%, 280px);
max-width: 100%;
}
.auth-side__art svg {
width: 100%;
height: auto;
max-height: 220px;
display: block;
}
.auth-side::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 42%, transparent) 0%,
color-mix(in srgb, var(--bg-7) 34%, var(--color-primary)) 48%,
color-mix(in srgb, var(--bg-7) 18%, transparent) 100%
),
radial-gradient(
circle at top right,
color-mix(in srgb, var(--color-accent) 8%, transparent),
transparent 32%
);
}
.auth-kicker {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.72rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 10%, white);
color: var(--color-primary);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.auth-side .auth-kicker {
background: rgba(255, 255, 255, 0.16);
color: #fff;
backdrop-filter: blur(3px);
}
.auth-card__title {
margin: 0;
font-size: clamp(1.65rem, 2.8vw, 2.1rem);
line-height: 1.12;
}
.auth-card__subtitle {
margin: 0;
color: var(--color-text-muted);
}
.auth-side .auth-card__subtitle {
color: rgba(255, 255, 255, 0.82);
font-size: 0.98rem;
}
.auth-form-intro {
margin-bottom: 1.15rem;
}
.auth-role-switch {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.auth-role-switch__item {
position: relative;
display: flex;
gap: 0.7rem;
align-items: flex-start;
padding: 0.85rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
border-radius: 1rem;
background: color-mix(in srgb, var(--color-surface) 96%, white);
cursor: pointer;
transition:
border-color 160ms ease,
background-color 160ms ease,
box-shadow 160ms ease;
}
.auth-role-switch__item input {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.auth-role-switch__item span {
display: grid;
gap: 0.2rem;
}
.auth-role-switch__item strong {
font-size: 0.96rem;
font-weight: 700;
color: var(--color-text);
}
.auth-role-switch__item small {
color: var(--color-text-muted);
font-size: 0.82rem;
line-height: 1.35;
}
.auth-role-switch__item.is-active {
border-color: color-mix(
in srgb,
var(--color-primary) 34%,
var(--color-border)
);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
box-shadow: 0 0 0 0.18rem
color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.auth-role-switch__item.is-active strong {
color: var(--color-primary);
}
.auth-teacher-fields {
margin-top: 1rem;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
border-radius: 1rem;
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
.auth-teacher-note {
display: flex;
align-items: flex-start;
gap: 0.6rem;
/* margin-top: 0.85rem; */
color: var(--color-text-muted);
font-size: 0.88rem;
line-height: 1.45;
}
.auth-teacher-note i {
color: var(--color-primary);
flex: 0 0 auto;
margin-top: 0.1rem;
}
[data-theme="dark"] .auth-role-switch__item {
background: color-mix(in srgb, var(--color-surface) 94%, #0f1724);
border-color: color-mix(in srgb, var(--color-border) 84%, transparent);
}
[data-theme="dark"] .auth-teacher-fields {
background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-border) 84%, transparent);
}
.auth-form-title {
margin: 0;
font-size: clamp(1.55rem, 2.4vw, 2rem);
line-height: 1.12;
}
.auth-form-copy {
margin: 0.45rem 0 0;
color: var(--color-text-muted);
}
.auth-alert {
border: 0;
border-radius: 0.9rem;
}
.auth-form .form-label {
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.45rem;
}
.auth-input {
position: relative;
}
.auth-input__icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
pointer-events: none;
z-index: 2;
}
.auth-form .form-control {
min-height: 52px;
padding-left: 2.9rem;
border-radius: 0.95rem;
border-color: color-mix(in srgb, var(--color-border) 85%, transparent);
background: var(--color-bg);
}
.auth-form .form-control.auth-input--with-toggle {
padding-right: 3rem;
}
.auth-form .form-control:focus {
border-color: color-mix(
in srgb,
var(--color-primary) 46%,
var(--color-border)
);
background: var(--color-bg);
box-shadow: 0 0 0 0.22rem
color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.auth-input:focus-within .auth-input__icon {
color: var(--color-primary);
}
.auth-input__toggle {
position: absolute;
right: 0.65rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--color-text-muted);
z-index: 2;
transition:
color 160ms ease,
background-color 160ms ease;
}
.auth-input__toggle:hover,
.auth-input__toggle:focus {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
outline: none;
}
.auth-field .form-text {
margin-top: 0.45rem;
color: var(--color-text-muted);
}
.auth-submit {
min-height: 52px;
font-weight: 700;
letter-spacing: 0.01em;
margin-top: 1.1rem;
box-shadow: 0 12px 24px
color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.auth-radio-option {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.95rem;
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
border-radius: 999px;
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.auth-radio-option:hover {
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-1px);
}
.auth-radio-option input {
margin: 0;
}
.auth-radio-option:has(input:checked) {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
color: var(--color-primary);
}
.auth-step {
display: none;
opacity: 0;
transform: translateY(12px);
transition: all 0.28s ease;
}
.auth-step.is-visible {
display: block;
opacity: 1;
transform: translateY(0);
}
.validation-feedback {
min-height: 1.25rem;
}
.is-invalid {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}
.auth-submit.is-loading {
opacity: 0.9;
}
.auth-submit.is-loading span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.auth-divider {
position: relative;
margin: 1.35rem 0 1rem;
text-align: center;
}
.auth-divider::before {
content: "";
position: absolute;
inset: 50% 0 auto;
border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.auth-divider span {
position: relative;
padding: 0 0.8rem;
background: color-mix(in srgb, var(--color-surface) 92%, white);
color: var(--color-text-muted);
font-size: 0.92rem;
}
.auth-socials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
}
.auth-socials .btn {
min-height: 48px;
font-weight: 600;
border-radius: 0.95rem !important;
}
.auth-social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
}
.auth-card__footer {
margin: 1rem 0 0;
text-align: center;
color: var(--color-text-muted);
}
.auth-card__footer a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.verification-card {
display: grid;
gap: 1rem;
}
.verification-card__head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
}
.verification-card__subtitle {
margin-top: -0.45rem;
}
.verification-target {
padding: 1rem 1.05rem;
border-radius: 1rem;
border: 1px solid
color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
.verification-target__label {
display: block;
margin-bottom: 0.25rem;
color: var(--color-text-muted);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.verification-target strong {
font-size: 1rem;
overflow-wrap: anywhere;
}
.verification-form,
.verification-resend {
margin: 0;
}
.verification-otp {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.8rem;
padding: 0.9rem;
border-radius: 1.25rem;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 94%, white),
color-mix(in srgb, var(--color-surface) 98%, white)
);
border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 70%, transparent),
0 16px 34px color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.verification-otp__digit {
width: 100%;
min-height: 64px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
border-radius: 1.1rem;
background: linear-gradient(
180deg,
color-mix(in srgb, white 92%, var(--color-bg)),
color-mix(in srgb, var(--color-surface) 82%, white)
);
color: var(--color-text);
text-align: center;
font-size: 1.28rem;
font-weight: 800;
letter-spacing: 0.04em;
line-height: 1;
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 82%, transparent),
0 10px 18px color-mix(in srgb, var(--color-primary) 6%, transparent);
transition:
border-color 160ms ease,
box-shadow 160ms ease,
transform 160ms ease,
background 160ms ease;
}
.verification-otp__digit:focus {
border-color: color-mix(
in srgb,
var(--color-primary) 46%,
var(--color-border)
);
background: linear-gradient(
180deg,
color-mix(in srgb, white 96%, var(--color-bg)),
white
);
box-shadow:
0 0 0 0.24rem color-mix(in srgb, var(--color-primary) 12%, transparent),
0 14px 24px color-mix(in srgb, var(--color-primary) 12%, transparent);
outline: 0;
transform: translateY(-1px);
}
.verification-otp__digit.is-filled {
border-color: color-mix(
in srgb,
var(--color-primary) 22%,
var(--color-border)
);
background: linear-gradient(
180deg,
color-mix(in srgb, white 95%, var(--color-bg)),
white
);
}
[data-theme="dark"] .verification-otp {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 92%, #111827),
color-mix(in srgb, var(--color-muted) 90%, #0b1220)
);
border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 18px 36px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .verification-otp__digit {
border-color: color-mix(in srgb, var(--color-border) 92%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, #182235 88%, var(--color-surface)),
color-mix(in srgb, #0f1724 94%, var(--color-surface))
);
color: var(--color-text);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 10px 20px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .verification-otp__digit:focus {
border-color: color-mix(
in srgb,
var(--color-primary) 64%,
var(--color-border)
);
background: linear-gradient(
180deg,
color-mix(in srgb, #1b2740 92%, var(--color-surface)),
color-mix(in srgb, #121c30 96%, var(--color-surface))
);
box-shadow:
0 0 0 0.24rem color-mix(in srgb, var(--color-primary) 18%, transparent),
0 14px 26px rgba(0, 0, 0, 0.24);
}
[data-theme="dark"] .verification-otp__digit.is-filled {
border-color: color-mix(
in srgb,
var(--color-primary) 44%,
var(--color-border)
);
background: linear-gradient(
180deg,
color-mix(in srgb, #1d2942 95%, var(--color-surface)),
color-mix(in srgb, #141f33 98%, var(--color-surface))
);
}
.verification-otp__digit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.verification-otp__digit::selection {
background: color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.btn.is-loading {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
pointer-events: none;
}
a.btn.is-loading {
text-decoration: none;
}
.btn.is-loading .spinner-border {
width: 1rem;
height: 1rem;
}
.verification-swal {
border-radius: 1.15rem;
}
.verification-swal__confirm {
min-width: 120px;
min-height: 44px;
padding: 0.7rem 1rem;
border: 0;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-primary-contrast);
font-weight: 700;
}
.auth-info-card {
height: 100%;
padding: 1.1rem 1.15rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.legal-page {
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 8%, transparent),
transparent 34%
),
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 3%, var(--color-bg)),
var(--color-bg)
);
}
.legal-page__hero {
padding: 4rem 0 2rem;
}
.legal-page__hero-inner {
max-width: 760px;
}
.legal-page__title {
margin: 0.85rem 0 0.7rem;
font-size: clamp(2rem, 4vw, 3.1rem);
line-height: 1.08;
}
.legal-page__subtitle {
margin: 0;
color: var(--color-text-muted);
font-size: 1rem;
}
.legal-page__meta {
margin: 1rem 0 0;
color: var(--color-text-muted);
font-size: 0.92rem;
font-weight: 600;
}
.legal-page__content {
padding: 0 0 4rem;
}
.legal-card {
max-width: 920px;
padding: clamp(1.4rem, 3vw, 2.2rem);
border-radius: 1.4rem;
border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
background: color-mix(in srgb, var(--color-surface) 96%, white);
box-shadow: 0 22px 52px
color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.legal-section + .legal-section {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}
.legal-section h2 {
margin: 0 0 0.7rem;
font-size: 1.15rem;
}
.legal-section p {
margin: 0;
color: var(--color-text);
line-height: 1.8;
}
.legal-section a {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
}
.account-shell {
max-width: 1180px;
}
.account-page {
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 8%, transparent),
transparent 34%
),
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 3%, var(--color-bg)),
var(--color-bg)
);
}
.account-hero,
.account-panel {
border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
background: color-mix(in srgb, var(--color-surface) 97%, white);
box-shadow: 0 24px 56px
color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.account-hero {
padding: clamp(1.3rem, 3vw, 2rem);
border-radius: 1.5rem;
}
.account-hero__media {
display: flex;
gap: 1.35rem;
/* align-items: center; */
justify-content: space-between;
}
.account-avatar {
position: relative;
flex: 0 0 auto;
width: 108px;
height: 108px;
border-radius: 1.6rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-primary) 20%, white),
color-mix(in srgb, var(--color-secondary) 14%, white)
);
color: var(--color-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
letter-spacing: 0.08em;
box-shadow: 0 18px 32px
color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.account-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.account-avatar--editor {
width: 150px;
height: 150px;
border-radius: 2rem;
margin-bottom: 1rem;
}
.account-hero__text {
flex: 1 1 auto;
}
.account-hero__title {
/* margin: 0.6rem 0 0.45rem; */
font-size: clamp(1.9rem, 4vw, 2.8rem);
line-height: 1.05;
}
.account-hero__subtitle {
max-width: 620px;
margin: 0;
color: var(--color-text-muted);
}
.account-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.15rem;
}
.account-hero__details {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 0.95rem;
}
.account-meta-chip {
display: inline-flex;
align-items: center;
gap: 0.55rem;
/* min-height: 42px; */
padding: 0.35rem 0.95rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--color-border) 74%, transparent);
background: color-mix(in srgb, var(--color-primary) 4%, white);
color: var(--color-text);
font-weight: 600;
}
.account-meta-item {
display: inline-flex;
flex-direction: column;
/* gap: 0.18rem; */
}
.account-meta-item span {
color: var(--color-text-muted);
font-size: 0.84rem;
}
.account-meta-item strong {
color: var(--color-text);
font-size: 0.95rem;
font-weight: 700;
}
.account-hero__verification {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.7rem;
margin-top: 1rem;
}
.account-inline-status {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.7rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
background: color-mix(in srgb, var(--color-primary) 3%, white);
}
.account-inline-status__label {
color: var(--color-text-muted);
font-size: 0.83rem;
font-weight: 700;
}
.account-progress {
display: grid;
gap: 0.8rem;
}
.account-progress--compact {
width: min(100%, 320px);
padding: 0.85rem 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
background: color-mix(in srgb, var(--color-primary) 3%, white);
}
.account-progress__bar {
position: relative;
height: 10px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--color-border) 70%, white);
}
.account-progress__fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(
90deg,
var(--color-primary),
color-mix(in srgb, var(--color-secondary) 42%, var(--color-primary))
);
box-shadow: 0 8px 18px
color-mix(in srgb, var(--color-primary) 18%, transparent);
transition: width 180ms ease;
}
.account-progress__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
color: var(--color-text-muted);
font-size: 0.92rem;
}
.account-progress__meta strong {
color: var(--color-text);
}
.account-panel {
margin-top: 1.25rem;
padding: clamp(1.3rem, 3vw, 2rem);
border-radius: 1.5rem;
}
.account-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.15rem;
}
.account-panel__title {
margin: 0;
font-size: clamp(1.45rem, 3vw, 2rem);
}
.account-panel__copy {
margin: 0.45rem 0 0;
color: var(--color-text-muted);
}
.account-form {
display: grid;
gap: 1rem;
}
.account-form__section {
padding: 1.15rem;
border-radius: 1.25rem;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
background: linear-gradient(
180deg,
color-mix(in srgb, white 94%, var(--color-surface)),
color-mix(in srgb, var(--color-primary) 2%, white)
);
}
.account-form__section-head {
margin-bottom: 1rem;
}
.account-form__section-head h3 {
margin: 0;
font-size: 1.02rem;
}
.account-form__section-head p {
margin: 0.35rem 0 0;
color: var(--color-text-muted);
}
.account-form .form-control,
.account-form .form-select,
.account-form textarea {
border-radius: 0.95rem;
}
.account-form input[list]::-webkit-calendar-picker-indicator {
opacity: 0.45;
}
.account-field-error {
margin-top: 0.35rem;
color: #dc3545;
font-size: 0.83rem;
line-height: 1.35;
}
.account-form .is-invalid-field {
border-color: rgba(220, 53, 69, 0.75) !important;
box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.12) !important;
}
.account-avatar-uploader {
position: sticky;
top: 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 100%;
padding: 1rem;
border-radius: 1.25rem;
border: 1px dashed color-mix(in srgb, var(--color-border) 76%, transparent);
background: color-mix(in srgb, var(--color-primary) 4%, white);
}
.account-upload-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.account-remove-photo {
padding: 0;
color: var(--color-text-muted);
text-decoration: none;
font-weight: 600;
}
.account-remove-photo:hover {
color: #dc3545;
}
.account-upload-note {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.account-form__actions {
display: flex;
justify-content: flex-end;
padding-top: 0.2rem;
}
.account-submit {
min-width: 190px;
}
.account-swal__cancel {
min-width: 120px;
min-height: 44px;
padding: 0.7rem 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
border-radius: 999px;
background: transparent;
color: var(--color-text);
font-weight: 700;
}
.account-post-hint {
display: grid;
gap: 0.35rem;
height: 100%;
padding: 0.9rem 1rem;
border-radius: 0.95rem;
border: 1px dashed color-mix(in srgb, var(--color-border) 76%, transparent);
background: color-mix(in srgb, var(--color-primary) 3%, white);
}
.account-post-hint span {
color: var(--color-text-muted);
font-size: 0.92rem;
}
.user-blog-table th {
white-space: nowrap;
}
.user-blog-table td {
vertical-align: middle;
}
.blog-detail__title {
margin: 0;
font-size: clamp(1.95rem, 4vw, 2.55rem);
line-height: 1.14;
font-weight: 800;
}
.blog-detail__excerpt {
margin: 0;
max-width: 780px;
color: var(--color-text-muted);
font-size: clamp(1rem, 2.2vw, 1.15rem);
line-height: 1.75;
}
.user-blog-table thead th {
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
color: var(--color-text-muted);
border-bottom-color: color-mix(in srgb, var(--color-border) 78%, transparent);
}
.user-blog-table tbody td {
background: transparent;
color: var(--color-text);
border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
}
.user-blog-table tbody tr:hover td {
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.my-posts-page .account-hero__subtitle {
max-width: 52rem;
}
.my-posts-page .account-hero__details {
gap: 0.55rem;
}
.my-posts-page .account-hero__details .account-meta-item {
min-width: 8.25rem;
}
/* ========================================
Orders List - Simplified List View
======================================== */
.orders-list-table {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--color-border);
border-radius: 0.85rem;
overflow: hidden;
background: var(--color-surface);
}
.orders-list-header {
display: grid;
grid-template-columns: 0.9fr 1.1fr 1fr 1.2fr 2fr;
gap: 1rem;
padding: 1rem;
background: color-mix(in srgb, var(--color-muted) 50%, var(--color-surface));
border-bottom: 1px solid var(--color-border);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text);
}
.orders-list-row {
display: grid;
grid-template-columns: 0.9fr 1.1fr 1fr 1.2fr 2fr;
gap: 1rem;
padding: 1rem;
border-bottom: 1px solid var(--color-border);
align-items: center;
transition: background-color 200ms ease;
}
.orders-list-row:last-child {
border-bottom: none;
}
.orders-list-row:hover {
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.orders-list-row--paid {
border-left: 3px solid var(--color-success);
}
.orders-list-row--pending {
border-left: 3px solid var(--color-warning);
}
.orders-list-row--cancelled {
border-left: 3px solid var(--color-error);
opacity: 0.8;
}
.orders-list-col {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.orders-list-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.orders-list-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
word-break: break-word;
}
.orders-list-col--number .orders-list-value {
font-weight: 700;
color: var(--color-primary);
}
.orders-list-col--amount .orders-list-value {
font-size: 1.05rem;
font-weight: 700;
}
.orders-list-badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.7rem;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
width: fit-content;
}
.orders-list-badge--paid {
background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
color: var(--color-success);
}
.orders-list-badge--pending {
background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));
color: color-mix(in srgb, var(--color-warning) 88%, #d97706);
}
.orders-list-badge--cancelled {
background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
color: var(--color-error);
}
.orders-list-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.orders-list-actions .btn {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
white-space: nowrap;
flex: 0 1 auto;
}
.orders-list-actions .btn-outline-secondary {
border-color: var(--color-border);
color: var(--color-text);
}
.orders-list-actions .btn-outline-secondary:hover {
background: var(--color-hover);
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Responsive adjustments */
@media (max-width: 1199px) {
.orders-list-header,
.orders-list-row {
grid-template-columns: 1fr 1fr 1fr 1.5fr;
gap: 0.75rem;
}
.orders-list-header {
padding: 0.9rem 0.75rem;
font-size: 0.8rem;
}
.orders-list-row {
padding: 0.9rem 0.75rem;
}
.orders-list-col--date,
.orders-list-header > div:nth-child(2) {
display: none;
}
}
@media (max-width: 767.98px) {
.orders-list-header {
display: none;
}
.orders-list-row {
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 0.9rem;
border-left: 4px solid var(--color-border);
}
.orders-list-row--paid {
border-left: 4px solid var(--color-success);
}
.orders-list-row--pending {
border-left: 4px solid var(--color-warning);
}
.orders-list-row--cancelled {
border-left: 4px solid var(--color-error);
}
.orders-list-col {
display: grid;
grid-template-columns: 100px 1fr;
align-items: center;
gap: 0.5rem;
}
.orders-list-col--actions {
grid-template-columns: 1fr;
}
.orders-list-label {
font-size: 0.65rem;
}
.orders-list-value {
font-size: 0.9rem;
}
.orders-list-actions {
grid-column: 1 / -1;
}
}
[data-theme="dark"] .orders-list-table {
border-color: color-mix(in srgb, var(--color-border) 86%, transparent);
}
[data-theme="dark"] .orders-list-header {
background: color-mix(in srgb, #1e293b 60%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
}
[data-theme="dark"] .orders-list-row {
border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
}
[data-theme="dark"] .orders-list-row:hover {
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
[data-theme="dark"] .account-hero,
[data-theme="dark"] .account-panel {
background: linear-gradient(
180deg,
color-mix(in srgb, #0f1724 94%, var(--color-surface)),
color-mix(in srgb, #121b2b 96%, var(--color-surface))
);
border-color: color-mix(in srgb, var(--color-border) 84%, transparent);
box-shadow: 0 28px 64px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .account-meta-chip,
[data-theme="dark"] .account-form__section {
background: linear-gradient(
180deg,
color-mix(in srgb, #132033 90%, var(--color-surface)),
color-mix(in srgb, #0f1828 95%, var(--color-surface))
);
border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
}
[data-theme="dark"] .account-avatar-uploader,
[data-theme="dark"] .account-inline-status {
background: linear-gradient(
180deg,
color-mix(in srgb, #152238 92%, var(--color-surface)),
color-mix(in srgb, #10192a 96%, var(--color-surface))
);
border-color: color-mix(in srgb, var(--color-border) 86%, transparent);
}
[data-theme="dark"] .account-progress--compact {
background: linear-gradient(
180deg,
color-mix(in srgb, #152238 92%, var(--color-surface)),
color-mix(in srgb, #10192a 96%, var(--color-surface))
);
border-color: color-mix(in srgb, var(--color-border) 86%, transparent);
}
[data-theme="dark"] .account-post-hint {
background: linear-gradient(
180deg,
color-mix(in srgb, #152238 92%, var(--color-surface)),
color-mix(in srgb, #10192a 96%, var(--color-surface))
);
border-color: color-mix(in srgb, var(--color-border) 86%, transparent);
}
[data-theme="dark"] .user-blog-table thead th {
background: color-mix(in srgb, #152238 92%, var(--color-surface));
color: color-mix(in srgb, white 72%, var(--color-text));
border-bottom-color: color-mix(in srgb, var(--color-border) 86%, transparent);
}
[data-theme="dark"] .user-blog-table tbody td {
color: var(--color-text);
border-color: color-mix(in srgb, var(--color-border) 82%, transparent);
}
[data-theme="dark"] .user-blog-table tbody tr:hover td {
background: color-mix(in srgb, #152238 64%, var(--color-surface));
}
/* Order Details Modal Styles */
#orderDetailsModal .modal-body p,
#orderTrackModal .modal-body p {
margin-bottom: 0.5rem;
}
#orderDetailsModal .text-muted,
#orderTrackModal .text-muted {
font-size: 0.85rem;
font-weight: 500;
}
#orderDetailsModal .fw-bold,
#orderTrackModal .fw-bold {
color: var(--color-text);
}
#orderDetailsModal .badge,
#orderTrackModal .badge {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
#orderDetailsModal hr,
#orderTrackModal hr {
margin: 1.2rem 0;
border-color: var(--color-border);
}
.order-track-timeline {
position: relative;
display: grid;
gap: 0.75rem;
margin-top: 0.75rem;
}
.order-track-timeline::before {
content: '';
position: absolute;
left: 1rem;
top: 0.5rem;
bottom: 0.5rem;
width: 2px;
background: var(--color-border);
opacity: 0.28;
}
.order-track-step {
position: relative;
display: grid;
gap: 0.35rem;
padding: 0.9rem 1rem 0.9rem 3.2rem;
border: 1px solid var(--color-border);
border-radius: 1rem;
background: var(--bg-1);
transition: background 0.2s ease, transform 0.2s ease;
}
.order-track-step:hover {
transform: translateX(0.8px);
}
.order-track-step-icon {
position: absolute;
left: 0.25rem;
top: 1rem;
width: 1.5rem;
height: 1.5rem;
display: grid;
place-items: center;
border-radius: 50%;
border: 2px solid var(--color-border);
background: var(--bg-1);
color: var(--color-text);
z-index: 3;
}
.order-track-step-icon svg {
width: 0.8rem;
height: 0.8rem;
display: block;
}
.order-track-step--active {
background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}
.order-track-step--active .order-track-step-icon {
border-color: var(--color-primary);
background: var(--color-primary);
color: white;
}
.order-track-step--complete {
background: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));
}
.order-track-step--complete .order-track-step-icon {
border-color: var(--color-success);
background: var(--color-success);
color: white;
}
.order-track-step--inactive {
opacity: 0.9;
}
.order-track-step-title {
font-weight: 700;
margin-bottom: 0.25rem;
letter-spacing: 0.01em;
}
.order-track-step-description {
color: var(--color-text);
font-size: 0.95rem;
margin: 0;
line-height: 1.5;
}
@media (max-width: 767.98px) {
#orderDetailsModal .modal-body {
padding: 1rem;
}
#orderDetailsModal .row {
margin-bottom: 1rem;
}
}
[data-theme="dark"] #orderDetailsModal .modal-content,
[data-theme="dark"] #orderTrackModal .modal-content {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] #orderDetailsModal .modal-header,
[data-theme="dark"] #orderTrackModal .modal-header {
border-color: var(--color-border);
}
[data-theme="dark"] #orderDetailsModal .modal-footer,
[data-theme="dark"] #orderTrackModal .modal-footer {
border-color: var(--color-border);
}
[data-theme="dark"] .order-track-step {
border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, #000);
}
[data-theme="dark"] .order-track-step::before {
border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
background: var(--color-surface);
}
[data-theme="dark"] .order-track-step-title {
color: var(--color-text);
}
[data-theme="dark"] .order-track-step-description {
color: color-mix(in srgb, var(--color-text) 72%, var(--color-surface));
}
[data-theme="dark"] .order-track-timeline::before {
background: color-mix(in srgb, var(--color-border) 30%, var(--color-surface));
}
[data-theme="dark"] .order-track-step-title {
color: var(--color-text);
}
[data-theme="dark"] .order-track-step-description {
color: color-mix(in srgb, var(--color-text) 72%, var(--color-surface));
}
[data-theme="dark"] .order-track-timeline::before {
background: color-mix(in srgb, var(--color-border) 30%, var(--color-surface));
}
[data-theme="dark"] .user-blog-table .text-muted,
[data-theme="dark"] .user-blog-table .small.text-muted {
color: color-mix(in srgb, white 58%, var(--color-text)) !important;
}
[data-theme="dark"] .account-progress__bar {
background: color-mix(in srgb, var(--color-border) 76%, #0f1724);
}
[data-theme="dark"] .account-field-error {
color: #ff8a94;
}
@media (max-width: 767.98px) {
.auth-page {
padding-left: 1rem !important;
padding-right: 1rem !important;
align-items: flex-start;
}
.auth-card__grid {
grid-template-columns: 1fr;
}
.auth-card__body {
padding: 1.15rem;
}
.auth-side {
padding: 1.15rem;
min-height: 150px;
}
.verification-card__head {
align-items: flex-start;
}
.legal-page__hero {
padding-top: 2.5rem;
}
.legal-card {
border-radius: 1rem;
padding: 1.1rem;
}
.verification-otp {
gap: 0.45rem;
padding: 0.65rem;
border-radius: 1rem;
}
.verification-otp__digit {
min-height: 54px;
font-size: 1.05rem;
border-radius: 0.95rem;
}
.account-hero__media {
flex-direction: column;
align-items: flex-start;
}
.account-progress__meta {
flex-direction: column;
align-items: flex-start;
}
.account-hero__verification {
align-items: stretch;
gap: 0.55rem;
}
.account-hero__details {
flex-direction: column;
gap: 0.65rem;
}
.account-meta-chip,
.account-inline-status {
width: 100%;
justify-content: flex-start;
}
.account-panel,
.account-hero {
border-radius: 1.1rem;
}
.account-hero {
padding: 1rem;
}
.account-panel {
margin-top: 0.95rem;
padding: 1rem;
}
.account-form__section {
padding: 0.9rem;
}
.account-avatar--editor {
width: 108px;
height: 108px;
border-radius: 1.2rem;
}
.account-form__actions {
justify-content: stretch;
}
.account-panel__head {
flex-direction: column;
margin-bottom: 0.95rem;
}
.account-progress--compact {
width: 100%;
padding: 0.75rem 0.85rem;
}
.account-avatar {
width: 86px;
height: 86px;
border-radius: 1.15rem;
font-size: 1.55rem;
}
.account-avatar-uploader {
padding: 0.85rem;
border-radius: 1rem;
}
.account-submit {
width: 100%;
}
.my-posts-page .account-hero__title {
font-size: 1.35rem;
}
.my-posts-page .account-hero__subtitle {
font-size: 0.92rem;
line-height: 1.5;
}
.my-posts-page .account-hero__details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.my-posts-page .account-hero__details .account-meta-item {
min-width: 0;
padding: 0.7rem 0.8rem;
}
.my-posts-page .account-panel__title {
font-size: 1.02rem;
}
.my-posts-page .account-panel__copy {
font-size: 0.9rem;
line-height: 1.5;
}
.my-posts-page .user-blog-table,
.my-posts-page .user-blog-table thead,
.my-posts-page .user-blog-table tbody,
.my-posts-page .user-blog-table th,
.my-posts-page .user-blog-table td,
.my-posts-page .user-blog-table tr {
display: block;
}
.my-posts-page .user-blog-table thead {
display: none;
}
.my-posts-page .user-blog-table tr {
margin-bottom: 0.85rem;
padding: 0.85rem;
border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
border-radius: 1rem;
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
}
.my-posts-page .user-blog-table td {
border: 0;
padding: 0.28rem 0;
text-align: left !important;
display: flex;
justify-content: space-between;
gap: 0.85rem;
align-items: flex-start;
}
.my-posts-page .user-blog-table td::before {
content: attr(data-label);
flex: 0 0 40%;
max-width: 40%;
color: var(--color-text-muted);
font-size: 0.82rem;
font-weight: 600;
}
.my-posts-page .user-blog-table td:nth-child(1)::before {
content: "Title";
}
.my-posts-page .user-blog-table td:nth-child(2)::before {
content: "Status";
}
.my-posts-page .user-blog-table td:nth-child(3)::before {
content: "Views";
}
.my-posts-page .user-blog-table td:nth-child(4)::before {
content: "Likes";
}
.my-posts-page .user-blog-table td:nth-child(5)::before {
content: "Comments";
}
.my-posts-page .user-blog-table td:nth-child(6)::before {
content: "Updated";
}
.my-posts-page .user-blog-table td:nth-child(7)::before {
content: "Review Note";
}
.my-posts-page .user-blog-table td:nth-child(8)::before {
content: "Action";
}
.my-posts-page .user-blog-table td:last-child {
padding-bottom: 0;
}
.my-posts-page .user-blog-table td:last-child .d-inline-flex,
.my-posts-page .user-blog-table td:last-child > a,
.my-posts-page .user-blog-table td:last-child > span {
width: 100%;
justify-content: flex-end;
}
.my-posts-page .user-blog-table .badge,
.my-posts-page .user-blog-table .btn {
width: auto;
}
}
[data-theme="dark"] .form-select,
.dark-mode .form-select {
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='%23e6eef8' 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.85rem center;
background-size: 16px 12px;
}
/* Isolated topbar switch styles to avoid global toggle conflicts */
.site-header .header-top .topbar-toggle-shell {
display: flex;
align-items: center;
gap: 0.85rem;
}
.site-header .header-top .topbar-toggle-group {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.site-header .header-top .topbar-toggle-group:hover {
transform: none;
}
.site-header .header-top .topbar-toggle-group .toggle-label {
display: none;
}
.site-header .header-top .topbar-toggle {
all: unset;
display: block;
position: relative;
width: 115px;
height: 55px;
padding: 6px;
box-sizing: border-box;
border-radius: 165px;
border: 1px solid #32303e;
background: #252532;
box-shadow:
inset 0 5px 10px 0 #16151c,
0 3px 6px -2px #403f4e;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
.site-header .header-top .topbar-toggle::before {
content: none;
}
.site-header .header-top .topbar-toggle::after {
content: "";
position: absolute;
top: 50%;
left: calc(100% - 35px);
width: 25px;
height: 25px;
border-radius: 50%;
border: 3px solid #ef565f;
box-sizing: border-box;
transform: translateY(-50%);
transition:
border-color 0.35s ease,
left 0.35s ease,
opacity 0.35s ease;
}
.site-header .header-top .topbar-toggle__slider {
all: unset;
display: block;
position: absolute;
top: 6px;
left: 6px;
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(#3b3a4e, #272733);
box-shadow:
inset 0 5px 4px 0 #424151,
0 4px 15px 0 #0f0e17;
transition: transform 0.3s ease-in;
}
.site-header .header-top .topbar-toggle__slider::before,
.site-header .header-top .topbar-toggle__slider::after {
content: none;
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before,
.site-header .header-top .topbar-toggle--theme .topbar-toggle__slider::before {
content: "";
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before {
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbeafe' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.8 12h16.4'/%3E%3Cpath d='M12 3.8c2.3 2.4 3.7 5.1 3.7 8.2S14.3 17.6 12 20.2C9.7 17.6 8.3 15 8.3 12s1.4-5.8 3.7-8.2Z'/%3E%3C/svg%3E");
}
.site-header .header-top .topbar-toggle--theme .topbar-toggle__slider::before {
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fde68a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23fbbf24' stroke='%23f59e0b'/%3E%3Cpath d='M12 2.8v2.2M12 19v2.2M21.2 12H19M5 12H2.8M18.5 5.5l-1.6 1.6M7.1 16.9l-1.6 1.6M18.5 18.5l-1.6-1.6M7.1 7.1 5.5 5.5'/%3E%3C/svg%3E");
}
.site-header
.header-top
.topbar-toggle--theme.active
.topbar-toggle__slider::before {
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2e8f0'%3E%3Cpath d='M20.4 14.5A7.9 7.9 0 0 1 9.5 3.6a8.5 8.5 0 1 0 10.9 10.9Z'/%3E%3C/svg%3E");
}
.site-header .header-top .topbar-toggle.active .topbar-toggle__slider {
transform: translateX(61px);
}
.site-header .header-top .topbar-toggle.active::after {
border-color: #60d480;
left: 10px;
}
@media (max-width: 768px) {
.site-header .header-top .topbar-toggle-shell {
gap: 0.65rem;
}
.site-header .header-top .topbar-toggle {
width: 104px;
height: 50px;
padding: 5px;
}
.site-header .header-top .topbar-toggle__slider {
top: 5px;
left: 5px;
width: 38px;
height: 38px;
}
.site-header .header-top .topbar-toggle.active .topbar-toggle__slider {
transform: translateX(54px);
}
.site-header .header-top .topbar-toggle::after {
left: calc(100% - 30px);
}
.site-header .header-top .topbar-toggle.active::after {
left: 8px;
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before {
width: 18px;
height: 18px;
}
.site-header .header-top .topbar-toggle--theme .topbar-toggle__slider::before,
.site-header
.header-top
.topbar-toggle--theme.active
.topbar-toggle__slider::before {
width: 16px;
height: 16px;
}
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle {
border-color: #cdd6e4;
background: linear-gradient(180deg, #fdfefe 0%, #e8eef7 100%);
box-shadow:
inset 0 5px 10px 0 rgba(255, 255, 255, 0.95),
inset 0 -4px 8px 0 rgba(180, 194, 214, 0.45),
0 10px 18px -10px rgba(70, 96, 132, 0.55);
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle::after {
border-color: #f26b6f;
}
html:not([data-theme="dark"])
.site-header
.header-top
.topbar-toggle.active::after {
border-color: #55c878;
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle__slider {
background: linear-gradient(180deg, #ffffff 0%, #dfe7f3 100%);
box-shadow:
inset 0 4px 6px 0 rgba(255, 255, 255, 0.95),
inset 0 -3px 6px 0 rgba(160, 176, 201, 0.32),
0 8px 18px 0 rgba(124, 145, 178, 0.35);
}
html:not([data-theme="dark"])
.site-header
.header-top
.topbar-toggle--lang
.topbar-toggle__slider::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.8 12h16.4'/%3E%3Cpath d='M12 3.8c2.3 2.4 3.7 5.1 3.7 8.2S14.3 17.6 12 20.2C9.7 17.6 8.3 15 8.3 12s1.4-5.8 3.7-8.2Z'/%3E%3C/svg%3E");
}
html:not([data-theme="dark"])
.site-header
.header-top
.topbar-toggle--theme
.topbar-toggle__slider::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23fbbf24' stroke='%23f59e0b'/%3E%3Cpath d='M12 2.8v2.2M12 19v2.2M21.2 12H19M5 12H2.8M18.5 5.5l-1.6 1.6M7.1 16.9l-1.6 1.6M18.5 18.5l-1.6-1.6M7.1 7.1 5.5 5.5'/%3E%3C/svg%3E");
}
html:not([data-theme="dark"])
.site-header
.header-top
.topbar-toggle--theme.active
.topbar-toggle__slider::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23334155'%3E%3Cpath d='M20.4 14.5A7.9 7.9 0 0 1 9.5 3.6a8.5 8.5 0 1 0 10.9 10.9Z'/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle {
box-shadow:
inset 0 5px 10px 0 rgba(255, 255, 255, 0.95),
inset 0 2px 3px 0 rgba(255, 255, 255, 0.85),
inset 0 -4px 8px 0 rgba(180, 194, 214, 0.45),
inset 0 -10px 14px 0 rgba(159, 174, 197, 0.22),
0 10px 18px -10px rgba(70, 96, 132, 0.55);
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle__slider {
box-shadow:
inset 0 4px 6px 0 rgba(255, 255, 255, 0.95),
inset 0 1px 2px 0 rgba(255, 255, 255, 0.95),
inset 0 -3px 6px 0 rgba(160, 176, 201, 0.32),
0 2px 4px 0 rgba(255, 255, 255, 0.55),
0 8px 18px 0 rgba(124, 145, 178, 0.35);
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle {
background:
radial-gradient(
circle at 50% 32%,
rgba(255, 255, 255, 0.9) 0,
rgba(255, 255, 255, 0.25) 34%,
transparent 35%
),
linear-gradient(180deg, #f9fbff 0%, #dde6f2 100%);
box-shadow:
inset 0 6px 12px 0 rgba(255, 255, 255, 0.96),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -6px 10px 0 rgba(166, 181, 202, 0.42),
inset 0 -14px 18px 0 rgba(151, 166, 188, 0.24),
inset 14px 0 18px -16px rgba(164, 178, 198, 0.28),
inset -14px 0 18px -16px rgba(164, 178, 198, 0.28),
0 12px 20px -12px rgba(70, 96, 132, 0.58);
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle__slider {
background: linear-gradient(180deg, #ffffff 0%, #d9e3ef 100%);
border: 1px solid rgba(198, 211, 228, 0.95);
box-shadow:
inset 0 5px 7px 0 rgba(255, 255, 255, 0.96),
inset 0 1px 2px 0 rgba(255, 255, 255, 0.95),
inset 0 -5px 8px 0 rgba(159, 176, 201, 0.34),
0 3px 6px 0 rgba(255, 255, 255, 0.68),
0 10px 20px 0 rgba(118, 140, 171, 0.34);
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle::after {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72);
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle {
box-shadow:
inset 0 5px 10px 0 rgba(255, 255, 255, 0.94),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.88),
inset 0 -5px 8px 0 rgba(166, 181, 202, 0.34),
inset 10px 0 12px -12px rgba(164, 178, 198, 0.2),
inset -10px 0 12px -12px rgba(164, 178, 198, 0.2),
0 6px 12px -10px rgba(70, 96, 132, 0.32);
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle__slider {
box-shadow:
inset 0 4px 6px 0 rgba(255, 255, 255, 0.95),
inset 0 1px 2px 0 rgba(255, 255, 255, 0.92),
inset 0 -4px 7px 0 rgba(159, 176, 201, 0.26),
0 2px 4px 0 rgba(255, 255, 255, 0.5),
0 6px 12px 0 rgba(118, 140, 171, 0.22);
}
html:not([data-theme="dark"]) .site-header .header-top .topbar-toggle::after {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.62);
}
.site-header .header-top .topbar-toggle {
height: 48px;
padding: 5px;
}
.site-header .header-top .topbar-toggle__slider {
top: 5px;
left: 5px;
width: 36px;
height: 36px;
}
.site-header .header-top .topbar-toggle::after {
width: 22px;
height: 22px;
left: calc(100% - 31px);
}
.site-header .header-top .topbar-toggle.active .topbar-toggle__slider {
transform: translateX(69px);
}
.site-header .header-top .topbar-toggle.active::after {
left: 9px;
}
@media (max-width: 768px) {
.site-header .header-top .topbar-toggle {
height: 44px;
padding: 4px;
}
.site-header .header-top .topbar-toggle__slider {
top: 4px;
left: 4px;
width: 34px;
height: 34px;
}
.site-header .header-top .topbar-toggle::after {
width: 20px;
height: 20px;
left: calc(100% - 28px);
}
.site-header .header-top .topbar-toggle.active .topbar-toggle__slider {
transform: translateX(58px);
}
.site-header .header-top .topbar-toggle.active::after {
left: 8px;
}
}
.site-header .header-top .topbar-toggle {
height: 44px;
padding: 4px;
}
.site-header .header-top .topbar-toggle__slider {
top: 4px;
left: 4px;
width: 32px;
height: 32px;
}
.site-header .header-top .topbar-toggle::after {
width: 20px;
height: 20px;
left: calc(100% - 28px);
}
.site-header .header-top .topbar-toggle.active .topbar-toggle__slider {
transform: translateX(71px);
}
.site-header .header-top .topbar-toggle.active::after {
left: 8px;
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before {
width: 16px;
height: 16px;
}
.site-header .header-top .topbar-toggle--theme .topbar-toggle__slider::before,
.site-header
.header-top
.topbar-toggle--theme.active
.topbar-toggle__slider::before {
width: 14px;
height: 14px;
}
@media (max-width: 768px) {
.site-header .header-top .topbar-toggle {
height: 40px;
padding: 4px;
}
.site-header .header-top .topbar-toggle__slider {
width: 28px;
height: 28px;
}
.site-header .header-top .topbar-toggle::after {
width: 18px;
height: 18px;
left: calc(100% - 25px);
}
.site-header .header-top .topbar-toggle.active .topbar-toggle__slider {
transform: translateX(64px);
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before {
width: 14px;
height: 14px;
}
.site-header .header-top .topbar-toggle--theme .topbar-toggle__slider::before,
.site-header
.header-top
.topbar-toggle--theme.active
.topbar-toggle__slider::before {
width: 12px;
height: 12px;
}
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before {
width: 18px;
height: 18px;
background-image: none;
color: #2563eb;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 18px;
text-align: center;
content: "EN";
}
.site-header
.header-top
.topbar-toggle--lang.active
.topbar-toggle__slider::before {
color: #1d4ed8;
content: "BN";
}
@media (max-width: 768px) {
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before {
width: 16px;
height: 16px;
font-size: 10px;
line-height: 16px;
}
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before,
html:not([data-theme="dark"])
.site-header
.header-top
.topbar-toggle--lang
.topbar-toggle__slider::before {
background: none !important;
background-image: none !important;
content: "EN" !important;
}
.site-header
.header-top
.topbar-toggle--lang.active
.topbar-toggle__slider::before,
html:not([data-theme="dark"])
.site-header
.header-top
.topbar-toggle--lang.active
.topbar-toggle__slider::before {
background: none !important;
background-image: none !important;
content: "BN" !important;
}
.site-header .header-top .topbar-toggle {
height: 40px;
padding: 4px;
}
.site-header .header-top .topbar-toggle__slider {
width: 28px;
height: 28px;
}
.site-header .header-top .topbar-toggle::after {
width: 18px;
height: 18px;
left: calc(100% - 25px);
}
.site-header .header-top .topbar-toggle.active .topbar-toggle__slider {
transform: translateX(74px);
}
.site-header .header-top .topbar-toggle.active::after {
left: 8px;
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before,
.site-header
.header-top
.topbar-toggle--lang.active
.topbar-toggle__slider::before {
width: 14px;
height: 14px;
font-size: 9px;
line-height: 14px;
}
.site-header .header-top .topbar-toggle--theme .topbar-toggle__slider::before,
.site-header
.header-top
.topbar-toggle--theme.active
.topbar-toggle__slider::before {
width: 12px;
height: 12px;
}
@media (max-width: 768px) {
.site-header .header-top .topbar-toggle {
height: 36px;
padding: 3px;
}
.site-header .header-top .topbar-toggle__slider {
top: 3px;
left: 3px;
width: 24px;
height: 24px;
}
.site-header .header-top .topbar-toggle::after {
width: 16px;
height: 16px;
left: calc(100% - 21px);
}
.site-header .header-top .topbar-toggle.active .topbar-toggle__slider {
transform: translateX(74px);
}
.site-header .header-top .topbar-toggle--lang .topbar-toggle__slider::before,
.site-header
.header-top
.topbar-toggle--lang.active
.topbar-toggle__slider::before {
width: 12px;
height: 12px;
font-size: 8px;
line-height: 12px;
}
.site-header .header-top .topbar-toggle--theme .topbar-toggle__slider::before,
.site-header
.header-top
.topbar-toggle--theme.active
.topbar-toggle__slider::before {
width: 10px;
height: 10px;
}
}
/* Search Hub Consolidated */
.search-hub,
.search-hub * {
box-sizing: border-box;
}
.search-hub {
padding-top: 0.5rem !important;
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 10%, transparent),
transparent 26%
),
radial-gradient(
circle at top right,
color-mix(in srgb, var(--color-secondary) 10%, transparent),
transparent 22%
),
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 3%, var(--color-bg)),
var(--color-bg)
) !important;
}
.search-hub .container {
width: min(1180px, calc(100% - 24px)) !important;
max-width: none !important;
}
.search-hub__panel,
.search-hub__summary,
.search-hub__form .search-bar.input-group,
.search-tab,
.search-view-toggle,
.search-result-card__link,
.search-hub-empty {
border-color: color-mix(
in srgb,
var(--color-border) 82%,
transparent
) !important;
background: color-mix(
in srgb,
var(--color-surface) 96%,
transparent
) !important;
color: var(--color-text) !important;
box-shadow: none !important;
}
.search-hub__panel {
display: block !important;
position: relative !important;
overflow: hidden !important;
padding: 16px !important;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent) !important;
border-radius: 18px !important;
}
.search-hub__header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
flex-wrap: wrap !important;
margin-bottom: 10px !important;
}
.search-hub__title {
margin: 0 !important;
font-size: 1.15rem !important;
line-height: 1.1 !important;
font-weight: 800 !important;
color: var(--color-text) !important;
}
.search-hub__summary {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
padding: 6px 10px !important;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent) !important;
border-radius: 999px !important;
font-size: 0.84rem !important;
color: var(--color-text-muted) !important;
}
.search-hub__summary-label {
padding: 0.22rem 0.58rem !important;
border-radius: 999px !important;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
font-size: 0.66rem !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.search-hub__divider {
width: 4px !important;
height: 4px !important;
border-radius: 50% !important;
background: var(--color-text-muted) !important;
}
.search-hub__form {
display: block !important;
margin: 0 0 10px !important;
}
.search-hub__form .search-bar.input-group {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0 !important;
width: 100% !important;
padding: 2px !important;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent) !important;
border-radius: 12px !important;
}
.search-hub__form .search-icon,
.search-hub__form .search-input,
.search-hub__form .search-clear,
.search-hub__form .search-btn {
position: static !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
.search-hub__form .search-icon {
flex: 0 0 auto !important;
width: 34px !important;
min-width: 34px !important;
padding: 0 !important;
justify-content: center !important;
background: transparent !important;
color: var(--color-primary) !important;
}
.search-hub__form .search-input {
flex: 1 1 auto !important;
width: 1% !important;
min-width: 0 !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 4px !important;
background: transparent !important;
color: var(--color-text) !important;
font-size: 0.88rem !important;
}
.search-hub__form .search-input::placeholder {
color: var(--color-text-muted) !important;
}
.search-hub__form .search-clear {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
min-width: 26px !important;
height: 26px !important;
border-radius: 999px !important;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
}
.search-hub__form .search-btn {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 12px !important;
border-radius: 9px !important;
background: linear-gradient(
135deg,
var(--color-primary),
color-mix(in srgb, var(--color-secondary) 32%, var(--color-primary))
) !important;
color: var(--color-primary-contrast) !important;
font-size: 0.84rem !important;
}
.search-hub__form .search-btn i {
margin-right: 0.3rem !important;
}
.search-hub__controls {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.search-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
}
.search-tab,
.search-view-toggle__btn {
appearance: none !important;
-webkit-appearance: none !important;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent) !important;
background: color-mix(
in srgb,
var(--color-surface) 96%,
transparent
) !important;
color: var(--color-text) !important;
font-weight: 700 !important;
}
.search-tab {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 2px 8px !important;
min-height: 26px !important;
border-radius: 999px !important;
line-height: 1 !important;
font-size: 0.9rem !important;
}
.search-tab span {
display: inline-grid !important;
place-items: center !important;
min-width: 16px !important;
height: 14px !important;
padding: 0 4px !important;
border-radius: 999px !important;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
font-size: 10px !important;
line-height: 14px !important;
}
.search-view-toggle {
display: inline-flex !important;
gap: 6px !important;
padding: 2px !important;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent) !important;
border-radius: 999px !important;
}
.search-view-toggle__btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 46px !important;
min-height: 24px !important;
padding: 2px 8px !important;
border-radius: 999px !important;
font-size: 0.88rem !important;
}
.search-tab.is-active,
.search-view-toggle__btn.is-active {
background: linear-gradient(
135deg,
var(--color-primary),
color-mix(in srgb, var(--color-secondary) 26%, var(--color-primary))
) !important;
color: var(--color-primary-contrast) !important;
border-color: transparent !important;
}
.search-tab.is-active span {
background: color-mix(in srgb, white 20%, transparent) !important;
color: var(--color-primary-contrast) !important;
}
.search-hub__results {
padding-top: 10px !important;
}
.search-results-stream.is-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.search-results-stream.is-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.search-result-card {
min-width: 0 !important;
}
.search-result-card__link {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
min-width: 0 !important;
padding: 12px !important;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent) !important;
border-radius: 16px !important;
}
.search-result-card__media {
width: 72px !important;
height: 72px !important;
border-radius: 12px !important;
overflow: hidden !important;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)),
var(--color-surface)
) !important;
}
.search-result-card__media--blog {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface)),
var(--color-surface)
) !important;
}
.search-result-card__media--writers {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)),
color-mix(in srgb, var(--color-secondary) 6%, var(--color-surface))
) !important;
}
.search-result-card__media--question-archive {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),
var(--color-surface)
) !important;
}
.search-result-card__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.search-result-card__icon {
display: inline-grid !important;
place-items: center !important;
width: 100% !important;
height: 100% !important;
color: var(--color-primary) !important;
}
.search-result-card__body {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.search-result-card__topline {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
align-items: center !important;
margin-bottom: 4px !important;
}
.search-result-card__type {
display: inline-flex !important;
align-items: center !important;
padding: 3px 8px !important;
border-radius: 999px !important;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
}
.search-result-card__meta {
display: block !important;
min-width: 0 !important;
color: var(--color-text-muted) !important;
font-size: 0.8rem !important;
line-height: 1.35 !important;
}
.search-result-card__meta--book {
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.search-result-card__title {
margin: 0 !important;
font-size: 0.94rem !important;
line-height: 1.28 !important;
color: var(--color-text) !important;
}
.search-result-card__text {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
margin: 3px 0 0 !important;
color: var(--color-text-muted) !important;
font-size: 0.84rem !important;
line-height: 1.45 !important;
}
.search-result-card__action {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 64px !important;
height: 32px !important;
padding: 0 10px !important;
border-radius: 999px !important;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.search-results-stream.is-list .search-result-card__link {
grid-template-columns: 68px minmax(0, 1fr) auto !important;
}
.search-results-stream.is-list .search-result-card__media {
width: 68px !important;
height: 68px !important;
}
.search-hub-empty {
padding: 20px 14px !important;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent) !important;
border-radius: 16px !important;
text-align: center !important;
color: var(--color-text-muted) !important;
}
.search-hub-empty__icon {
display: inline-grid !important;
place-items: center !important;
width: 46px !important;
height: 46px !important;
margin-bottom: 8px !important;
border-radius: 12px !important;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
}
.search-hub-empty__title {
margin: 0 !important;
font-size: 1.05rem !important;
color: var(--color-text-muted) !important;
}
body.dark-mode .search-hub,
[data-theme="dark"] .search-hub {
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 14%, transparent),
transparent 26%
),
radial-gradient(
circle at top right,
color-mix(in srgb, var(--color-secondary) 12%, transparent),
transparent 22%
),
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 4%, var(--color-bg)),
var(--color-bg)
) !important;
}
body.dark-mode .search-hub__panel,
body.dark-mode .search-hub__summary,
body.dark-mode .search-hub__form .search-bar.input-group,
body.dark-mode .search-tab,
body.dark-mode .search-view-toggle,
body.dark-mode .search-result-card__link,
body.dark-mode .search-hub-empty,
[data-theme="dark"] .search-hub__panel,
[data-theme="dark"] .search-hub__summary,
[data-theme="dark"] .search-hub__form .search-bar.input-group,
[data-theme="dark"] .search-tab,
[data-theme="dark"] .search-view-toggle,
[data-theme="dark"] .search-result-card__link,
[data-theme="dark"] .search-hub-empty {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 94%, #0b1220),
color-mix(in srgb, var(--color-muted) 90%, #0b1220)
) !important;
border-color: color-mix(
in srgb,
var(--color-border) 88%,
transparent
) !important;
color: var(--color-text) !important;
box-shadow: none !important;
}
body.dark-mode .search-hub__summary-label,
body.dark-mode .search-tab span,
body.dark-mode .search-result-card__type,
body.dark-mode .search-result-card__action,
body.dark-mode .search-hub-empty__icon,
body.dark-mode .search-view-toggle,
body.dark-mode .search-hub__form .search-clear,
[data-theme="dark"] .search-hub__summary-label,
[data-theme="dark"] .search-tab span,
[data-theme="dark"] .search-result-card__type,
[data-theme="dark"] .search-result-card__action,
[data-theme="dark"] .search-hub-empty__icon,
[data-theme="dark"] .search-view-toggle,
[data-theme="dark"] .search-hub__form .search-clear {
background: color-mix(
in srgb,
var(--color-primary) 18%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
}
body.dark-mode .search-hub__title,
body.dark-mode .search-result-card__title,
body.dark-mode .search-tab,
body.dark-mode .search-view-toggle__btn,
body.dark-mode .search-hub__form .search-input,
[data-theme="dark"] .search-hub__title,
[data-theme="dark"] .search-result-card__title,
[data-theme="dark"] .search-tab,
[data-theme="dark"] .search-view-toggle__btn,
[data-theme="dark"] .search-hub__form .search-input {
color: var(--color-text) !important;
}
body.dark-mode .search-hub__summary,
body.dark-mode .search-result-card__meta,
body.dark-mode .search-result-card__text,
body.dark-mode .search-hub-empty__title,
[data-theme="dark"] .search-hub__summary,
[data-theme="dark"] .search-result-card__meta,
[data-theme="dark"] .search-result-card__text,
[data-theme="dark"] .search-hub-empty__title {
color: var(--color-text-muted) !important;
}
@media (max-width: 991.98px) {
.search-results-stream.is-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 767.98px) {
.search-hub .container {
width: min(100%, calc(100% - 16px)) !important;
}
.search-hub__panel {
padding: 12px !important;
}
.search-hub__summary {
width: 100% !important;
}
.search-hub__form .search-bar.input-group {
flex-wrap: wrap !important;
}
.search-hub__form .search-input {
height: 34px !important;
min-height: 34px !important;
font-size: 0.88rem !important;
}
.search-hub__form .search-btn {
width: 100% !important;
height: 32px !important;
min-height: 32px !important;
margin-top: 6px !important;
}
.search-hub__controls {
flex-direction: column !important;
align-items: stretch !important;
}
.search-tabs {
gap: 4px !important;
}
.search-tab {
min-height: 24px !important;
font-size: 0.86rem !important;
}
.search-tab span {
height: 14px !important;
font-size: 9px !important;
line-height: 14px !important;
}
.search-view-toggle {
width: fit-content !important;
}
.search-view-toggle__btn {
min-width: 42px !important;
min-height: 24px !important;
font-size: 0.84rem !important;
}
.search-result-card__link,
.search-results-stream.is-list .search-result-card__link {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 10px !important;
}
.search-result-card__media,
.search-results-stream.is-list .search-result-card__media {
width: 100% !important;
height: 132px !important;
}
.search-result-card__action {
width: fit-content !important;
}
}
.search-result-card .mjx-container {
max-width: 100% !important;
overflow-x: auto;
overflow-y: hidden;
}
.search-result-card__title .mjx-container {
display: inline-block !important;
margin: 0 !important;
}
.search-result-card__text .mjx-container {
display: inline-block !important;
margin: 0 !important;
}
.search-hub__form .search-input::-webkit-search-decoration,
.search-hub__form .search-input::-webkit-search-cancel-button,
.search-hub__form .search-input::-webkit-search-results-button,
.search-hub__form .search-input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
.search-hub__form .search-input[type="search"]::-ms-clear,
.search-hub__form .search-input[type="search"]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
.search-hub__form .search-clear,
.search-hub__form .search-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 9px !important;
border: 1px solid transparent !important;
line-height: 1 !important;
}
.search-hub__form .search-clear {
width: 30px !important;
min-width: 30px !important;
height: 30px !important;
margin-right: 4px !important;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
}
.search-hub__form .search-btn {
height: 30px !important;
min-height: 30px !important;
padding: 0 12px !important;
}
.search-hub__form .search-clear:hover,
.search-hub__form .search-btn:hover {
border-color: color-mix(
in srgb,
var(--color-primary) 24%,
var(--color-border)
) !important;
}
body.dark-mode .search-hub__form .search-clear,
[data-theme="dark"] .search-hub__form .search-clear {
background: color-mix(
in srgb,
var(--color-primary) 18%,
var(--color-surface)
) !important;
color: var(--color-primary) !important;
}
[data-search-suggest-form] {
position: relative;
}
.search-suggest-panel {
position: absolute;
top: calc(100% + 0.4rem);
left: 0;
right: 0;
z-index: 1080;
padding: 0.45rem;
border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
border-radius: 1rem;
background: color-mix(in srgb, var(--color-surface) 98%, transparent);
box-shadow: 0 18px 34px
color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.search-suggest-group + .search-suggest-group {
margin-top: 0.45rem;
padding-top: 0.45rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}
.search-suggest-group__title {
padding: 0.25rem 0.55rem 0.45rem;
color: var(--color-text-muted);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.search-suggest-item {
width: 100%;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.7rem;
align-items: start;
padding: 0.55rem 0.65rem;
border: 0;
border-radius: 0.8rem;
background: transparent;
color: var(--color-text);
text-align: left;
}
.search-suggest-item:hover,
.search-suggest-item.is-active {
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.search-suggest-item__type {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.3rem;
padding: 0.22rem 0.45rem;
border-radius: 999px;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-primary);
font-size: 0.68rem;
font-weight: 700;
}
.search-suggest-item__body {
min-width: 0;
display: grid;
gap: 0.16rem;
}
.search-suggest-item__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.92rem;
font-weight: 600;
}
.search-suggest-item__meta {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-muted);
font-size: 0.8rem;
}
body.dark-mode .search-suggest-panel,
[data-theme="dark"] .search-suggest-panel {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 94%, #0b1220),
color-mix(in srgb, var(--color-muted) 90%, #0b1220)
);
border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
}
@media (max-width: 767.98px) {
.search-suggest-panel {
padding: 0.35rem;
}
.search-suggest-item {
gap: 0.55rem;
padding: 0.5rem 0.55rem;
}
.search-suggest-item__title {
font-size: 0.88rem;
}
}
/* Lecture Slides */
.lecture-slides-page {
background:
radial-gradient(
circle at top left,
color-mix(in srgb, var(--color-primary) 8%, transparent),
transparent 24%
),
radial-gradient(
circle at top right,
color-mix(in srgb, var(--color-secondary) 8%, transparent),
transparent 18%
),
linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 2%, var(--color-bg)),
var(--color-bg)
);
}
.lecture-slides-shell {
display: grid;
gap: 1.25rem;
}
.lecture-slides-shell--locked {
min-height: 55vh;
place-items: center;
}
.lecture-slides-hero,
.lecture-slides-toolbar,
.lecture-slides-archive,
.lecture-slides-footer-note,
.lecture-slides-guard {
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
border-radius: 1.5rem;
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
}
.lecture-slides-hero {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1.25rem;
padding: 1.4rem;
}
.lecture-slides-hero__eyebrow,
.lecture-slides-guard__eyebrow {
display: inline-flex;
align-items: center;
padding: 0.32rem 0.7rem;
border-radius: 999px;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-primary);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.lecture-slides-hero__title,
.lecture-slides-guard__title {
margin: 0.75rem 0 0.55rem;
font-size: clamp(1.5rem, 1.2rem + 1vw, 2.4rem);
}
.lecture-slides-hero__text,
.lecture-slides-guard__text {
max-width: 48rem;
margin: 0;
color: var(--color-text-muted);
}
.lecture-slides-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.lecture-slides-stat {
min-width: 7rem;
padding: 0.8rem 0.95rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
text-align: center;
}
.lecture-slides-stat strong {
display: block;
font-size: 1.25rem;
line-height: 1.1;
}
.lecture-slides-stat span {
color: var(--color-text-muted);
font-size: 0.82rem;
}
.lecture-slides-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
}
.lecture-slides-search {
flex: 1 1 24rem;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.3rem 0.8rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface) 98%, transparent);
}
.lecture-slides-search i {
color: var(--color-primary);
}
.lecture-slides-search .form-control {
border: 0;
box-shadow: none;
background: transparent;
min-height: 2.5rem;
padding: 0;
}
.lecture-slides-toolbar__note {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.lecture-slides-archive {
padding: 1.2rem;
}
.lecture-slides-archive .all-books-list {
display: grid;
gap: 0.9rem;
}
.lecture-slides-archive h3 {
margin: 0.7rem 0 0.1rem;
font-size: 1rem;
font-weight: 800;
color: var(--color-text);
}
.lecture-slides-archive h3:first-child {
margin-top: 0;
}
.lecture-slides-archive .course {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
border-radius: 1rem;
background: color-mix(in srgb, var(--color-surface) 98%, transparent);
cursor: pointer;
transition:
border-color 160ms ease,
background-color 160ms ease;
}
.lecture-slides-archive .course::after {
content: "+";
flex: 0 0 auto;
width: 1.9rem;
height: 1.9rem;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-primary);
font-weight: 800;
}
.lecture-slides-archive .course.is-open::after {
content: "−";
}
.lecture-slides-archive .course h4 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.lecture-slides-archive .course h4 i {
display: none;
}
.lecture-slides-archive .year {
padding: 0.35rem 0 0.1rem;
}
.lecture-slides-archive .year table {
width: 100%;
margin: 0;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
border-radius: 1rem;
}
.lecture-slides-archive .year tr + tr td {
border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}
.lecture-slides-archive .year td {
padding: 0.85rem 1rem;
vertical-align: middle;
color: var(--color-text);
background: color-mix(in srgb, var(--color-surface) 99%, transparent);
}
.lecture-slides-archive .year td:last-child {
width: 1%;
white-space: nowrap;
text-align: right;
}
.lecture-slides-archive .year a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 6.5rem;
min-height: 2.25rem;
padding: 0 0.9rem;
border-radius: 999px;
border: 1px solid
color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
color: var(--color-primary);
font-weight: 700;
text-decoration: none;
}
.lecture-slides-archive .year a:hover {
background: color-mix(
in srgb,
var(--color-primary) 14%,
var(--color-surface)
);
}
.lecture-slides-footer-note,
.lecture-slides-guard {
display: flex;
align-items: start;
gap: 1rem;
padding: 1.2rem 1.25rem;
}
.lecture-slides-footer-note__icon,
.lecture-slides-guard__actions {
flex: 0 0 auto;
}
.lecture-slides-footer-note__icon {
width: 2.7rem;
height: 2.7rem;
border-radius: 0.9rem;
display: inline-grid;
place-items: center;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-primary);
}
.lecture-slides-footer-note__title {
margin: 0 0 0.25rem;
font-size: 1rem;
}
.lecture-slides-footer-note__text {
margin: 0;
color: var(--color-text-muted);
}
.lecture-slides-guard {
max-width: 48rem;
margin: 0 auto;
flex-direction: column;
}
.lecture-slides-guard__actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
body.dark-mode .lecture-slides-hero,
body.dark-mode .lecture-slides-toolbar,
body.dark-mode .lecture-slides-archive,
body.dark-mode .lecture-slides-footer-note,
body.dark-mode .lecture-slides-guard,
[data-theme="dark"] .lecture-slides-hero,
[data-theme="dark"] .lecture-slides-toolbar,
[data-theme="dark"] .lecture-slides-archive,
[data-theme="dark"] .lecture-slides-footer-note,
[data-theme="dark"] .lecture-slides-guard,
body.dark-mode .lecture-slides-archive .course,
[data-theme="dark"] .lecture-slides-archive .course,
body.dark-mode .lecture-slides-archive .year table,
[data-theme="dark"] .lecture-slides-archive .year table,
body.dark-mode .lecture-slides-search,
[data-theme="dark"] .lecture-slides-search {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 94%, #0b1220),
color-mix(in srgb, var(--color-muted) 90%, #0b1220)
);
border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
}
body.dark-mode .lecture-slides-archive .year td,
[data-theme="dark"] .lecture-slides-archive .year td {
background: transparent;
}
@media (max-width: 767.98px) {
.lecture-slides-hero,
.lecture-slides-toolbar,
.lecture-slides-footer-note,
.lecture-slides-guard {
padding: 1rem;
}
.lecture-slides-hero,
.lecture-slides-toolbar {
flex-direction: column;
align-items: stretch;
}
.lecture-slides-hero__meta {
width: 100%;
}
.lecture-slides-stat {
flex: 1 1 0;
}
.lecture-slides-archive {
padding: 0.9rem;
}
.lecture-slides-archive .course {
padding: 0.85rem 0.9rem;
}
.lecture-slides-archive .year td {
padding: 0.75rem 0.8rem;
display: block;
width: 100%;
text-align: left !important;
}
.lecture-slides-archive .year td:last-child {
padding-top: 0;
}
}
/* Chat Page */
.chat-page {
background: var(--color-background);
}
.chat-shell {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 1rem;
min-height: 72vh;
}
.chat-shell__sidebar,
.chat-shell__panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 1rem;
}
.chat-shell__sidebar {
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-shell__intro {
padding: 1rem 1rem 0.9rem;
border-bottom: 1px solid var(--color-border);
}
.chat-shell__eyebrow {
margin: 0 0 0.2rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
}
.chat-shell__title {
margin: 0;
font-size: 1.2rem;
line-height: 1.2;
}
.chat-shell__subtitle {
margin: 0.45rem 0 0;
font-size: 0.92rem;
color: var(--color-text-muted);
}
.chat-shell__list {
padding: 0.55rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
min-height: 0;
overflow: auto;
}
.chat-shell__placeholder {
padding: 1rem;
font-size: 0.95rem;
color: var(--color-text-muted);
}
.chat-conversation {
position: relative;
width: 100%;
padding: 0.85rem 0.9rem;
border: 1px solid var(--color-border);
border-radius: 0.9rem;
background: var(--color-background);
text-align: left;
transition:
border-color 0.2s ease,
background-color 0.2s ease;
}
.chat-conversation:hover,
.chat-conversation.is-active {
border-color: color-mix(
in srgb,
var(--color-primary) 45%,
var(--color-border)
);
background: color-mix(
in srgb,
var(--color-surface) 70%,
var(--color-primary) 6%
);
}
.chat-conversation__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.2rem;
}
.chat-conversation__title {
display: block;
font-size: 0.95rem;
line-height: 1.25;
color: var(--color-text);
}
.chat-conversation__time,
.chat-conversation__subtitle {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.chat-conversation__preview {
font-size: 0.88rem;
line-height: 1.35;
color: var(--color-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 0.3rem;
}
.chat-conversation__badge {
position: absolute;
top: 0.8rem;
right: 0.8rem;
min-width: 1.35rem;
height: 1.35rem;
padding: 0 0.35rem;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-size: 0.76rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-shell__panel {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.chat-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
border-bottom: 1px solid var(--color-border);
}
.chat-panel__title {
margin: 0;
font-size: 1.08rem;
}
.chat-panel__meta,
.chat-panel__status {
margin: 0.25rem 0 0;
font-size: 0.86rem;
color: var(--color-text-muted);
}
.chat-panel__status {
margin-top: 0.05rem;
white-space: nowrap;
}
.chat-panel__messages {
flex: 1 1 auto;
padding: 1rem 1.1rem;
background: color-mix(
in srgb,
var(--color-background) 84%,
var(--color-surface)
);
overflow: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.chat-panel__empty {
margin: auto 0;
text-align: center;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.chat-message {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.45rem;
flex-wrap: nowrap;
}
.chat-message.is-own {
justify-content: flex-end;
}
.chat-message__bubble {
max-width: min(620px, 86%);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 1rem;
padding: 0.25rem 0.8rem;
}
.chat-message.is-own .chat-message__bubble {
background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
border-color: color-mix(
in srgb,
var(--color-primary) 30%,
var(--color-border)
);
}
.chat-message__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
/* margin-bottom: 0.35rem; */
font-size: 0.76rem;
color: var(--color-text-muted);
}
.chat-message__reply {
margin-bottom: 0.45rem;
padding: 0.35rem 0.55rem;
border-left: 3px solid
color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
border-radius: 0.7rem;
background: color-mix(
in srgb,
var(--color-background) 82%,
var(--color-surface)
);
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.chat-message__reply strong {
font-size: 0.78rem;
line-height: 1.2;
color: var(--color-primary);
}
.chat-message__reply span {
font-size: 0.78rem;
line-height: 1.35;
color: var(--color-text-muted);
}
.chat-message__body {
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-text);
white-space: pre-wrap;
word-break: break-word;
}
.chat-message__image-link {
display: inline-block;
margin-bottom: 0.55rem;
}
.chat-message__image {
display: block;
max-width: min(240px, 100%);
max-height: 240px;
border-radius: 0.9rem;
object-fit: cover;
}
.chat-message__reactions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.55rem;
}
.chat-message__reaction-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
height: 1.8rem;
padding: 0 0.55rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-background);
color: var(--color-text);
font-size: 0.76rem;
}
.chat-message__reaction-chip.is-reacted {
border-color: color-mix(
in srgb,
var(--color-primary) 40%,
var(--color-border)
);
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
}
.chat-message__rail {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: 0 0 auto;
}
.chat-message__reaction-picker {
position: absolute;
top: 50%;
right: calc(100% + 0.35rem);
transform: translateY(-50%);
z-index: 8;
display: flex;
flex-wrap: nowrap;
gap: 0.35rem;
padding: 0.35rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.chat-message.is-own .chat-message__reaction-picker {
right: 0;
}
.chat-message__reaction-option {
width: 2rem;
height: 2rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
font-size: 1rem;
}
.chat-message__reply-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-background);
color: var(--color-text-muted);
font-size: 0.78rem;
flex: 0 0 auto;
}
.chat-panel__composer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
padding: 1rem 1.1rem;
border-top: 1px solid var(--color-border);
}
.chat-panel__composer-row,
.chat-widget__toolbar {
position: relative;
display: flex;
align-items: flex-end;
gap: 0.55rem;
}
.chat-panel__reply {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 0.55rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 0.9rem;
background: color-mix(
in srgb,
var(--color-background) 88%,
var(--color-surface)
);
}
.chat-panel__reply-copy {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.chat-panel__reply-copy strong {
font-size: 0.78rem;
line-height: 1.2;
color: var(--color-primary);
}
.chat-panel__reply-copy span {
font-size: 0.82rem;
line-height: 1.35;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-panel__reply-dismiss,
.chat-panel__emoji {
width: 2rem;
height: 2rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-background);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-panel__emoji-menu {
position: absolute;
left: 0;
top: calc(100% + 0.35rem);
z-index: 6;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
width: min(16rem, calc(100vw - 3rem));
padding: 0.55rem;
border: 1px solid var(--color-border);
border-radius: 0.9rem;
background: var(--color-surface);
}
.chat-panel__emoji-item {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 0.7rem;
background: color-mix(
in srgb,
var(--color-background) 88%,
var(--color-surface)
);
font-size: 1rem;
}
.chat-panel__reply[data-chat-image-preview],
.chat-panel__reply[data-chat-widget-image-preview] {
background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
.chat-panel__input {
flex: 1 1 auto;
min-height: 2.9rem;
max-height: 8.25rem;
resize: none;
border: 1px solid var(--color-border);
border-radius: 0.9rem;
padding: 0.8rem 0.95rem;
background: var(--color-background);
color: var(--color-text);
line-height: 1.5;
}
.chat-panel__input:focus {
outline: none;
border-color: color-mix(
in srgb,
var(--color-primary) 38%,
var(--color-border)
);
}
.chat-panel__send {
min-width: 6rem;
height: 2.9rem;
flex: 0 0 auto;
}
.chat-panel__send.is-sending {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
pointer-events: none;
opacity: 0.9;
}
.chat-send-spinner {
width: 0.95rem;
height: 0.95rem;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 999px;
animation: chatSendSpin 0.7s linear infinite;
flex: 0 0 auto;
}
.chat-message__body mjx-container {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.chat-message__body mjx-container[jax="SVG"] {
margin: 0.15rem 0;
}
.chat-widget {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1080;
}
.chat-widget__launcher {
position: relative;
width: 3.35rem;
height: 3.35rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
}
.chat-widget__launcher .chat-widget__badge {
position: absolute;
top: -0.2rem;
right: -0.15rem;
background: #dc3545;
}
.chat-widget__panel {
position: absolute;
right: 0;
bottom: 4.2rem;
width: min(24rem, calc(100vw - 1.5rem));
height: min(36rem, calc(100vh - 6rem));
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
.chat-widget__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 0.95rem 1rem 0.85rem;
border-bottom: 1px solid var(--color-border);
}
.chat-widget__title {
margin: 0;
font-size: 1rem;
line-height: 1.2;
}
.chat-widget__meta {
margin: 0.2rem 0 0;
font-size: 0.82rem;
color: var(--color-text-muted);
}
.chat-widget__actions {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.chat-widget__help {
position: absolute;
top: 4.15rem;
right: 0.95rem;
z-index: 3;
width: min(19rem, calc(100% - 1.9rem));
padding: 0.9rem 0.95rem;
border: 1px solid var(--color-border);
border-radius: 0.95rem;
background: var(--color-surface);
}
.chat-widget__help-title {
margin: 0 0 0.65rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--color-heading, var(--color-text));
}
.chat-widget__help-list {
margin: 0;
padding-left: 1rem;
display: grid;
gap: 0.35rem;
font-size: 0.82rem;
color: var(--color-text-muted);
}
.chat-widget__help-list code {
font-size: 0.78rem;
padding: 0.08rem 0.3rem;
border-radius: 0.35rem;
background: color-mix(
in srgb,
var(--color-primary) 10%,
var(--color-surface)
);
color: var(--color-text);
}
.chat-widget__help-link {
display: inline-flex;
align-items: center;
margin-top: 0.8rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
}
.chat-widget__icon-btn {
width: 2rem;
height: 2rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-background);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-widget__body {
flex: 1 1 auto;
overflow: auto;
padding: 0.95rem 1rem;
background: color-mix(
in srgb,
var(--color-background) 84%,
var(--color-surface)
);
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.chat-widget__lead {
display: grid;
gap: 0.85rem;
padding: 1rem;
border-bottom: 1px solid var(--color-border);
}
.chat-widget__lead-copy h3 {
margin: 0 0 0.2rem;
font-size: 1rem;
line-height: 1.25;
}
.chat-widget__lead-copy p {
margin: 0;
font-size: 0.84rem;
color: var(--color-text-muted);
}
.chat-widget__lead-form {
display: grid;
gap: 0.6rem;
}
.chat-widget__lead-input {
width: 100%;
min-height: 2.75rem;
border: 1px solid var(--color-border);
border-radius: 0.9rem;
padding: 0.7rem 0.9rem;
background: var(--color-background);
color: var(--color-text);
font-size: 0.94rem;
}
.chat-widget__lead-input:focus {
outline: none;
border-color: color-mix(
in srgb,
var(--color-primary) 38%,
var(--color-border)
);
}
.chat-widget__lead-error {
margin: 0;
font-size: 0.8rem;
color: #dc2626;
}
.chat-widget__lead-submit {
min-height: 2.75rem;
border: 0;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-weight: 600;
}
.chat-widget__composer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.7rem;
padding: 0.9rem 1rem 1rem;
border-top: 1px solid var(--color-border);
}
.chat-widget__input {
flex: 1 1 auto;
min-height: 2.8rem;
max-height: 8rem;
resize: none;
border: 1px solid var(--color-border);
border-radius: 0.9rem;
padding: 0.5rem 0.9rem;
background: var(--color-background);
color: var(--color-text);
line-height: 1.5;
}
.chat-widget__input:focus {
outline: none;
border-color: color-mix(
in srgb,
var(--color-primary) 38%,
var(--color-border)
);
}
.chat-widget__send {
width: 2.8rem;
min-width: 2.8rem;
height: 2.8rem;
padding: 0;
border: 1px solid transparent;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-weight: 600;
flex: 0 0 auto;
}
.chat-widget__send.is-sending {
color: transparent;
pointer-events: none;
position: relative;
}
.chat-widget__send.is-sending::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 1rem;
height: 1rem;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 999px;
animation: chatSendSpin 0.7s linear infinite;
}
@keyframes chatSendSpin {
to {
transform: rotate(360deg);
}
}
[data-theme="dark"] .chat-conversation,
body.dark-mode .chat-conversation,
[data-theme="dark"] .chat-message__bubble,
body.dark-mode .chat-message__bubble,
[data-theme="dark"] .chat-panel__input,
body.dark-mode .chat-panel__input {
background: color-mix(in srgb, var(--color-surface) 92%, #0f172a);
}
[data-theme="dark"] .chat-panel__reply,
body.dark-mode .chat-panel__reply,
[data-theme="dark"] .chat-message__reply,
body.dark-mode .chat-message__reply,
[data-theme="dark"] .chat-message__reaction-chip,
body.dark-mode .chat-message__reaction-chip,
[data-theme="dark"] .chat-message__reaction-option,
body.dark-mode .chat-message__reaction-option,
[data-theme="dark"] .chat-message__reaction-picker,
body.dark-mode .chat-message__reaction-picker,
[data-theme="dark"] .chat-widget__input,
body.dark-mode .chat-widget__input,
[data-theme="dark"] .chat-widget__lead-input,
body.dark-mode .chat-widget__lead-input,
[data-theme="dark"] .chat-widget__icon-btn,
body.dark-mode .chat-widget__icon-btn,
[data-theme="dark"] .chat-panel__emoji,
body.dark-mode .chat-panel__emoji,
[data-theme="dark"] .chat-panel__reply-dismiss,
body.dark-mode .chat-panel__reply-dismiss,
[data-theme="dark"] .chat-panel__emoji-item,
body.dark-mode .chat-panel__emoji-item {
background: color-mix(in srgb, var(--color-surface) 92%, #0f172a);
}
[data-theme="dark"] .chat-widget__lead,
body.dark-mode .chat-widget__lead {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .chat-widget__help,
body.dark-mode .chat-widget__help {
background: color-mix(in srgb, var(--color-surface) 92%, #0f172a);
}
[data-theme="dark"] .chat-widget__help-list code,
body.dark-mode .chat-widget__help-list code {
background: rgba(255, 255, 255, 0.06);
color: #f8fafc;
}
[data-theme="dark"] .mobile-bottom-nav,
body.dark-mode .mobile-bottom-nav {
background: color-mix(in srgb, var(--color-surface) 92%, #0f172a 8%);
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.26),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
[data-theme="dark"]
.mobile-bottom-nav__item.is-active
.mobile-bottom-nav__icon-wrap,
body.dark-mode
.mobile-bottom-nav__item.is-active
.mobile-bottom-nav__icon-wrap {
background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
@media (max-width: 991.98px) {
.chat-shell {
grid-template-columns: 1fr;
}
.chat-shell__sidebar {
max-height: 18rem;
}
}
@media (max-width: 991.98px) {
body {
padding-bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px));
}
.mobile-bottom-nav {
display: grid;
}
.chat-widget {
bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
}
.site-header {
position: sticky;
top: -2.75rem;
z-index: 1001;
}
.site-header .header-main {
position: relative;
}
.site-header .site-brand__full-logo {
display: none !important;
}
.site-header .site-brand__icon-logo {
display: block !important;
}
.chat-page {
padding-left: 0 !important;
padding-right: 0 !important;
}
.chat-shell {
gap: 0.8rem;
}
.chat-shell__sidebar,
.chat-shell__panel {
border-radius: 0.85rem;
}
.chat-panel__header,
.chat-panel__messages,
.chat-panel__composer,
.chat-shell__intro {
padding-left: 0.9rem;
padding-right: 0.9rem;
}
.chat-panel__composer {
flex-direction: column;
align-items: stretch;
}
.chat-panel__composer-row,
.chat-widget__toolbar {
align-items: stretch;
flex-wrap: wrap;
}
.chat-panel__input,
.chat-widget__input {
min-width: 100%;
}
.chat-panel__send,
.chat-widget__send {
width: 100%;
}
.chat-message__bubble {
max-width: 100%;
}
.chat-message__reaction-picker {
top: auto;
bottom: calc(100% + 0.35rem);
right: calc(100% - 1.25rem);
transform: none;
}
.chat-widget {
right: 0.75rem;
bottom: calc(4.95rem + env(safe-area-inset-bottom, 0px));
}
.chat-widget__panel {
bottom: 4rem;
width: min(22rem, calc(100vw - 1rem));
height: min(32rem, calc(100vh - 5.5rem));
}
}
/* ========================================
PDF Viewer Styles
======================================== */
.book-detail__preview-controls {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border);
}
.book-detail__preview-nav {
display: flex;
align-items: center;
gap: 0.5rem;
}
.book-detail__preview-page-input {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.book-detail__preview-page-input input {
width: 3rem;
text-align: center;
border: 1px solid var(--color-border);
border-radius: 0.25rem;
padding: 0.25rem;
font-size: 0.875rem;
}
.book-detail__preview-zoom {
display: flex;
align-items: center;
gap: 0.25rem;
}
.book-detail__preview-view-mode {
display: flex;
align-items: center;
}
.book-detail__preview-actions {
display: flex;
align-items: center;
gap: 0.25rem;
}
@media (max-width: 768px) {
.book-detail__preview-controls {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.book-detail__preview-nav,
.book-detail__preview-zoom,
.book-detail__preview-view-mode,
.book-detail__preview-actions {
justify-content: center;
}
}